, sen burada
border: 5px solid rgba(255, 255, 255, .5);
kullanabilirsiniz daha a
sen, 0-1 ölçeklendirebiliyoruz alfa anlamına gelir.
Ayrıca bazı siz de aynı işi yapar opacity
kullanmayı önerebilir, tek fark, evet bazı iş ya vardır ama rgba
opacity
kullanarak daha iyi görünüyor, çok opak alma alt öğeleri sonuçlanacaktır olduğunu. Eski tarayıcılar rgba
tanımıyor, onlar sizin elemana hex
renk uygulanır, böylece bu
eski tarayıcılar için, her zaman, geri #
(onaltılık) kullanarak arka plan rengini tıpkı bir düşüş beyan ederim.
Demo
Demo 2 (yerine background-image
bir img
etiketi ile)
Demo 3
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Not (Demo 3 için) (iç içe div için arka plan görüntüsü ile): Resim, yüksekliğe ve genişliğine göre ölçeklendirilecektir; Ölçek oranını kırmayın.
Olası kopya: http://stackoverflow.com/questions/4062001/css3-border-opacity – showdev
Bunu beğendiniz mi? http://jsfiddle.net/6qJcc/1/ – defaultNINJA