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ı?

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