半透明邊框
background-clip屬性
瀏覽器支持：
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。
註釋： Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。
默認值：border-box
語法
background-clip: border-box|padding-box|content-box;| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到邊框盒。 |
| padding-box | 背景被裁剪到內邊距框。 |
| content-box | 背景被裁剪到內容框。 |
示例
border-box(默認值)
.div_border{
margin: 40px auto;
height: 200px;
width: 200px;
background: white;
border: 10px solid hsla(0, 0%, 100%, .5);
background-clip: border-box;
padding: 10px;
}<body style="background: hotpink">
<div class="div_border">
<h1>半透明邊框</h1>
</div>
</body>效果圖
padding-box
.div_border{
margin: 40px auto;
height: 200px;
width: 200px;
background: white;
border: 10px solid hsla(0, 0%, 100%, .5);
background-clip: padding-box;
padding: 10px;
}<body style="background: hotpink">
<div class="div_border">
<h1>半透明邊框</h1>
</div>
</body>效果圖
content-box
.div_border{
margin: 40px auto;
height: 200px;
width: 200px;
background: white;
border: 10px solid hsla(0, 0%, 100%, .5);
background-clip: content-box;
padding: 10px;
}<body style="background: hotpink">
<div class="div_border">
<h1>半透明邊框</h1>
</div>
</body>效果圖
