您可以使邊框透明嗎？

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;

更新示例

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

這里的例子

Answer 2

在這里，如果您想要完全透明，則可以使用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％透明）之間

嘗試擺弄

Answer 3

此答案僅添加一些信息。 （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/