CSS3背景裁切屬性——background-clip

前端王睿發表於2018-07-09
CSSS3

CSS中的background屬性想必大家已經用了無數遍，但是對於CSS3屬性background-clip你可能還不太瞭解，那麼今天我們就專門來聊聊這個屬性。

clip，英文意為 “裁切，修剪”，所以很顯然，background-clip屬性肯定與背景裁切有關，而事實也正是如此。

background-clip存在以下四個屬性值，他們分別是：

border-box、padding-box、content-box 和 text

接下來我將通過具體例項來對background-clip這幾個屬性值一一進行講解。

1. 不設定 background-clip 屬性

/*CSS*/
.box{ display: inline-block; width: 200px; height: 200px; margin: 20px; padding: 20px; border: 10px dashed #000; background-color: #ff0;}

<!--HTML-->
<div class="box">想要學習更多前端知識，歡迎關注微信公眾號：前端微站</div>

顯示效果：

圖一

2. border-box

/*CSS*/
.box1{ background-clip: border-box;}

<!--HTML-->
<div class="box box1">想要學習更多前端知識，歡迎關注微信公眾號：前端微站</div>

border，意味著將邊框以外的背景部分裁掉，所以最終效果與圖一相同，也就是說，border-box是background-clip的預設屬性值。

3. padding-box

/*CSS*/
.box2{ background-clip: padding-box;}

<!--HTML-->
<div class="box box2">想要學習更多前端知識，歡迎關注微信公眾號：前端微站</div>

padding，意味著將內邊距以外的背景部分裁掉，所以最終效果如圖二所示：

圖二

4. content-box

/*CSS*/
.box3{ background-clip: content-box;}

<!--HTML-->
<div class="box box3">想要學習更多前端知識，歡迎關注微信公眾號：前端微站</div>

content，意味著將內容以外的背景部分裁掉，所以最終效果如圖三所示：

圖三

5. text

/*CSS*/
.box4{ -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(right,#0f0,#00f); -webkit-background-clip: text;}

<!--HTML-->
<div class="box box4">想要學習更多前端知識，歡迎關注微信公眾號：前端微站</div>

text，意味著將文字輪廓以外的背景部分裁掉而只留下文字輪廓以內的部分，而此時我們只需要通過設定文字為透明色即可透過文字看到盒子背景色，所以最終效果如圖四所示：

圖四

相容性：

background-clip: text ，目前需要加上webkit字首

本文重點總結

① background-clip 用於背景裁切，有 border-box、padding-box、content-box 和 text 四個屬性值
② border-box 裁掉邊框以外的背景部分，為預設值
③ padding-box 裁掉內邊距以外的背景部分
④ content-box 裁掉內容以外的背景部分
⑤ text 裁掉文字輪廓以外的背景部分，目前需加webkit字首


相關文章