Opaklık CSS3 Sınır?
Orada ileri CSS düzgün bir şekilde bir öğenin kenarlığı gibi bir şey ile yarı saydam yapmak için :
border-opacity:0.7;
?
Kimseye bu kadar resim kullanmadan nasıl yapabilirim bir fikri olan var mı?
CEVAP
Ne yazık ki opacity
öğe bütün unsur ya da herhangi bir metin de dahil olmak üzere) yarı saydam hale getirir. Sınır yarı saydam yapmak için en iyi şekilde temsil etmek renk biçimi. Örneğin, bu yüzde 50 opaklık ile kırmızı bir sınır vermek istiyorum:
div {
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9 , Firefox 4 , Opera, Chrome */
}
Bu yaklaşım ile sorun bazı tarayıcılar rgba
biçimini anlamak ve eğer bu tüm Bildirgesi ise herhangi bir sınır görüntülenir. Çözüm iki sınır tanımlamalar sağlamaktır. Sahte ışık, gerçek ile ikinci ile ilk. Eğer bir tarayıcı yetenekli ise, ikinci kullanın, ilk kullanacak yoksa.
div {
border: 1px solid rgb(127, 0, 0);
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9 , Firefox 4 , Opera, Chrome */
}
İlk sınır Bildirgesi eşdeğer beyaz bir arka plan sınırı altında herhangi bir grafik dağılmaz rağmen) P opak kırmızı kenarlık rengi olacak.
GÜNCELLEME:"Arka plan-klip: dolgu-box;" bu cevap (yorum SooDesuNe önerisine göre) sınır sağlamak için sağlam bir arka plan rengi uygulanırsa bile şeffaf kalır. ekledim
Box-shadow:İç metin CSS3 sadece bir ya...
CSS3'border-radius özelliği ve sı...
CSS3 özelliği y-taşma kaydırma:dokunma...
Opaklık IE8 çalışan CSS değil...
Degrade arka planlar ile CSS3 geçişler...