Question

在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？

提前致谢！

Answer 1

您可以使用：border: 5px rgba(0, 255, 0, 0.6) solid;

UPDATED EXAMPLE

#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);

EXAMPLE HERE

Answer 2

如果您希望完全透明，可以使用border-color: transparent -

border: 5px solid transparent;

Try in fiddel

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％透明）之间变化

Try in fiddle

Answer 3

此答案仅添加一些信息。（3种方式：box-shadow:outset x x x ;或box-shadow: inset x x x;或background-clip）

如果您想要在边框上显示不透明度并查看父容器的背景，而不是与元素本身的背景混合，则可以使用插入阴影绘制背景颜色。 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);而不是边框

绘制边框

现在最简单的假设是背景剪辑：http://css-tricks.com/transparent-borders-with-background-clip/

你能让边框透明吗？

3 个答案: