CSS'de kenarlık opaklığı ayarlayabilir misiniz?

Bir öğenin kenarlığını böyle bir şeyle yarı saydam yapmanın düz bir CSS yolu var mı?

border-opacity: 0.7;

Değilse, görüntüleri kullanmadan nasıl yapabileceğime dair bir fikrim var mı?

Ne yazık ki opacityöğe tüm öğeyi (herhangi bir metin dahil) yarı saydam yapar. Kenarlığı yarı saydam yapmanın en iyi yolu rgba renk biçimidir. Örneğin, bu% 50 opaklığa sahip kırmızı bir kenarlık verir:

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şımdaki sorun, bazı tarayıcıların rgbabiçimi anlamaması ve bildirimin tamamı ise hiçbir kenarlık göstermemesidir. Çözüm, iki sınır bildirimi sağlamaktır. Birincisi sahte opaklıkla, ikincisi ise gerçekle. Bir tarayıcı yetenekli ise, ikincisini kullanır, değilse, ilkini kullanır.

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 kenarlık bildirimi, beyaz bir arka plan üzerinde% 50 opak kırmızı kenarlığa eşdeğer renk olacaktır (kenarlık altındaki grafikler akmayacak olsa da).

GÜNCELLEME: "background-clip: padding-box;" ekledim düz bir arka plan rengi uygulansa bile kenarlığın şeffaf kalmasını sağlamak için bu cevaba (SooDesuNe'nun yorumlardaki önerisine göre).

Kolay, 0 ofset ile düz bir gölge kullanın:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Ayrıca, öğeye sınır yarıçapı ayarlarsanız, size oldukça yuvarlak kenarlıklar verir

jsFiddle Demosu

Diğerlerinin de belirttiği gibi: CSS-3, rgba(...)opaklık (alfa) değerine sahip bir kenarlık rengi belirtmek için sözdizimini kullanabileceğinizi söylüyor .

kontrol etmek isterseniz kısa bir örnek .

• Safari ve Chrome'da çalışır (muhtemelen tüm webkit tarayıcılarında çalışır).

• Firefox'ta çalışır

• IE'de hiç çalıştığından şüpheliyim, ancak çalışmasını sağlayacak bazı filtre veya davranışlar olduğundan şüpheleniyorum.

Orada da bu stackoverflow sonrası bazı diğer konular önerir - yani, sınır belirttiğiniz herhangi arka plan rengi (veya arka plan görüntüsü) on-top-of hale getirdiği; bu nedenle birçok durumda sınır alfa'nın yararlılığını sınırlar.

CSS kodunuzu W3C doğrulayıcı ile kontrol ederseniz, büyük tarayıcılarda çalışsa bile CSS kodunuzun kabul edilebilir olup olmadığını göreceksiniz.

Yukarıda yazıldığı gibi CSS aracılığıyla şeffaf bir kenarlık oluşturmak,

border: 1px solid rgba(255, 0, 0, .5);

W3C standartları tarafından kabul edilmez, CSS3 için bile. Doğrudan giriş doğrulayıcıyı aşağıdaki CSS koduyla kullandım,

.test { border: 1px solid rgba(255, 0, 0, .5); }

Sonuçlar,

Değer Hatası: border Çok fazla değer veya değer tanınmıyor: 1px solid rgba (255,0,0,0.5)

Ne yazık ki, alfa değerinin ("rgb" sonunda "a" harfi) W3C tarafından henüz kenarlık renk değerlerinin bir parçası olarak kabul edilmemesi. Tüm tarayıcılarda çalıştığı için neden standartlaştırılmadığını merak ediyorum. Tek sorun, W3C standartlarına bağlı kalmak veya CSS'de bir şey oluşturmak için ondan ayrılmak isteyip istemediğinizdir.

Kullanmak için W3C çevrimiçi CSS doğrulayıcı / Direk Giriş .

Çalışmanızı kontrol etmek için bir doğrulayıcı kullanmak her zaman iyi bir fikirdir, saatlerce kodlama çalışmasından sonra çapraz gözünüze geçerken kodlamada küçük veya büyük hatalar bulmanıza gerçekten yardımcı olur.

* Bildiğim kadarıyla bu tür koşullarda normalde yaptığım şey olmadığından daha büyük bir boyuta sahip bir blok oluşturmak ((bordersize * 2) + originalsize) ve kullanarak saydam yapmak

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

işte bir örnek

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Güncelleme:

Sonuçta bu soru 8 yıldan daha eski olduğu için bu cevap modası geçmiş. Bugün tüm güncel tarayıcılar rgba, kutu gölgeleri vb. Destekler. Ama bu 8 yıl önce nasıl olduğu hakkında iyi bir örnek.

Alternatif bir çözüm olarak verebilir çalışmak bazı durumlarda: değiştirmek border-styleiçin dotted.

Ön plan rengi ile arka plan rengi arasında değişen piksel gruplarına sahip olmak, kısmen saydam piksellerden oluşan sürekli bir çizgiyle aynı değildir. Öte yandan, bu önemli ölçüde daha az CSS gerektirir ve tarayıcıya özgü yönergeler olmadan her tarayıcıda çok daha uyumludur.

Diğer cevaplar sınır opaklığı sorununun teknik yönüyle ilgilenirken, bir hack (yalnızca saf CSS ve HTML) sunmak istiyorum. Temel olarak bir sınır div ve ardından içerik div içeren bir kapsayıcı div oluşturun.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

Ve sonra CSS: (içerik kenarlığını yok olarak ayarlayın, kenarlık kalınlığı dikkate alınacak şekilde konumlandırmaya dikkat edin)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

Hayır, yalnızca css ile bir kenarlığın opaklığını ayarlamanın bir yolu yoktur .

Örneğin , rengi bilmiyorsanız, yalnızca kenarlığın opaklığını yalnızca kullanarak değiştirmenin bir yolu yoktur rgba().

bunu dene:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

Ve işte büyülü CSS'miz geliyor ..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Demoyu buradan kontrol edin .