html边框透,html – 如何使用CSS透明边框？

好吧，如果你想要完全透明，你可以使用

border: 5px solid transparent;

如果你的意思是不透明/透明，比你可以使用

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

这里，一个手段alpha，你可以缩放，0-1。

还有一些可能建议你使用不透明度做同样的工作，唯一的区别是，它会导致子元素变得不透明，是的，有一些工作，但是rgba似乎比使用不透明度更好。

对于旧版本的浏览器，总是使用#(十六进制)来声明背景颜色，因为如果旧的浏览器不能识别rgba，它们将使用十六进制颜色。

Demo 2(带有nested div的背景图片)

Demo 3(使用img标记，而不是背景图像)

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*/

}

Note (For Demo 3): Image will be scaled according to the height and width provided so make sure it doesn’t break the scaling ratio.