[英]Can you make the border transparent?
在CSS中,有一种方法可以使边框透明,但是带有边框的框(内部)相同吗?
请查看此链接: http : //jsfiddle.net/xiiJaMiiE/LfWBn/14/
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
background:white;
z-index:1;
width:80%;
border:5px #0F0 solid;
}
我想知道是否可以使绿色边框0.6不透明并将白色保持在正常范围内。
那是可能的还是我必须彼此叠加2个div?
提前致谢!
您可以使用以下命令: border: 5px rgba(0, 255, 0, 0.6) solid;
#white_box {
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
top: 0%;
left: 5%;
right: 5%;
background: white;
z-index: 1;
width: 80%;
border: 5px rgba(0, 255, 0, 0.6) solid;
}
另外,您也可以使用outline
。 两者都有不同的结果。
outline: 10px solid rgba(0, 255, 0, 0.6);
在这里,如果您想要完全透明,则可以使用border-color: transparent
border: 5px solid transparent;
Unfortunately, in Explorer, border-color: transparent is rendered as black.
或者,如果您只希望部分透明的边框,则可以将rgb with alpha transparency
使用-
border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity
Alpha透明度变量介于0(不透明度0%= 100%透明)和1(100不透明度= 0%透明)之间
此答案仅添加一些信息。 (3种方式: box-shadow:outset xxx ;
box-shadow: inset xxx;
或background-clip
)
如果要在边界上不透明并可以透视父容器的背景 ,而不是与元素本身的背景混合,则可以绘制带有嵌入式阴影的background-color。 http://jsfiddle.net/Y78Ap/1/ (增加了自愿边框宽度,并为身体增加了渐变,使其更具“说服力”)
html,body {
Background-color:rgba(255,165,0,0.5);
background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3));
}
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
box-shadow:inset 0 0 0 2000px white;
z-index:1;
width:80%;
border: 15px rgba(0, 255, 0, 0.6) solid;
}
您也可以使用box-shadow: 0 0 5px rgba(0,255,0,0.6);
绘制边框box-shadow: 0 0 5px rgba(0,255,0,0.6);
代替边框
如今,最简单的方法应该是background-clip: http : //css-tricks.com/transparent-borders-with-background-clip/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.