CSS半透明邊框

時間 2019-11-19

標籤 css 半透明邊框欄目 CSS 简体版

原文原文鏈接

我使用的測試代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS:半透明</title>
<style>
body {
background:yellow;
}

#div1{
width: 100px;
height: 100px;
border: 20px solid rgba(0,0,0,0.1);
background: red;
background-clip: padding-box;
}
#div2{
position:absolute;
margin-top: 70px;

}
span {
border: 10px blue;
border-style: dotted double;
margin: 1em;
padding: 2em;
background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text { background-clip: text; }


</style>

</head>
<body>
<div id="div1">

</div>
<div id="div2">
<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span> 
</div>

</body>
</html>

和下面的圖不同的地方是：個人這個是純色的背景html

1.半透明邊框

問題:測試

若是咱們要爲一個容器設置紅色背景和一道黑色半透明邊框，咱們可能會這樣寫:spa
border: 20px solid rgba(0,0,0,0.5);
background: red;
可是效果倒是這樣的（圖1-1.png）；咱們的半透明顏色怎麼沒有實現半透明邊框？3d

圖1-1.png

解決方案：code

咱們能夠經過background-clip屬性來調整上面的默認行爲，把它是值設爲padding-box,而後就出現了咱們想要的效果（圖1-2.png）；htm
border: 20px solid rgba(0,0,0,0.5);
background: red;
background-clip: padding-box;
圖1-2.png

2.background-clip

既然用到了background-clip屬性，那咱們就來看看這個屬性吧;
background-clip:
設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。blog

值（values ）	說明
border-box	默認初始值，背景延伸到邊框外沿（可是在邊框之下）
padding-box	邊框下面沒有背景，即背景延伸到內邊距外沿
content-box	背景裁剪到內容區 (content-box) 外沿
text	實驗API，背景裁剪到前景文本（ foreground text）內

CSS content圖片

span {
   border: 10px blue;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text { background-clip: text; }

HTML contentip

<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span>