CSS background-clip
background-clip屬性用於規定元素背景能夠繪製區域,對背景色、背景圖片和漸變都有效。
掌握此屬性的用法可以從其名稱入手,background-clip由兩個單詞構成:
(1).background:翻譯成漢語具有"背景"的意思。
(2).clip:翻譯成漢語具有"修剪"的意思。
顧名思義,此屬性用於"修剪"元素背景,也就是規定元素背景的繪製區域。
語法結構:
[CSS] 純文字檢視 複製程式碼background-clip:border-box|padding-box|content-box|text
下面通過程式碼例項詳細分析一個上述各個屬性值的作用。
為了便於演示,下面的程式碼都是以背景顏色作為演示,與背景圖片或者漸變原理相同。
一.border-box:
此屬性值規定背景可以在元素的邊框內繪製(預設值)。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ border:10px dashed green; width:150px; height:50px; padding:10px; margin-top:10px; } .border-box{ background-clip:border-box; background-color:#ccc } </style> </head> <body> <div class="ant border-box"></div> </body> </html>
程式碼執行效果截圖如下:
二.padding-box:
此屬性值規定背景可以在內邊距範圍內繪製,不能在邊框內繪製。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ border:10px dashed green; width:150px; height:50px; padding:10px; margin-top:10px; } .border-box{ background-clip:padding-box; background-color:#ccc } </style> </head> <body> <div class="ant border-box"></div> </body> </html>
程式碼執行效果截圖如下:
此時,背景可以在內邊距內繪製,但是不能在邊框內繪製。
三.content-box:
此屬性值規定背景可在內容區域繪製,不包括邊框和內邊距區域。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ border:10px dashed green; width:150px; height:50px; padding:10px; margin-top:10px; } .border-box{ background-clip:content-box; background-color:#ccc } </style> </head> <body> <div class="ant border-box"></div> </body> </html>
程式碼執行效果截圖如下:
四.text:
此屬性值規定背景只能在文字前景內容中繪製。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ border:10px dashed green; width:150px; height:50px; padding:10px; margin-top:10px; font-size:30px; font-weight:900 } .border-box{ -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-color:red; } </style> </head> <body> <div class="ant border-box">螞蟻部落</div> </body> </html>
程式碼執行效果截圖如下:
文字的text-fill-color或者color屬性值要設為transparent,否則背景會被遮擋。
相關文章
- CSS3 background-clipCSSS3
- CSS3背景裁切屬性——background-clipCSSS3
- CSS3學習之background-origin和background-clip區別CSSS3
- 強大的CSS: box-sizing與background-clip,解決背景顯示範圍的問題CSS
- background-origin和background-clip區別
- 巧用 background-clip 實現超強的文字動效
- css 命名:BEM, scoped css, css modules 與 css-in-jsCSSJS
- 【CSS】CSS常用技巧CSS
- CSS速刷 - CSS效果CSS
- css43 CSS SpecificityCSS
- css15 CSS MarginsCSS
- css16 CSS PaddingCSSpadding
- CSS——CSS基礎(1)CSS
- CSS速刷 - CSS動畫CSS動畫
- css34 CSS Opacity / TransparencyCSSS3
- css38 CSS Image SpritesCSSS3
- css44 CSS The !important RuleCSSImport
- css45 CSS Math FunctionsCSSFunction
- css11 CSS RGB ColorsCSS
- css12 CSS HEX ColorsCSS
- css17 CSS Height, WidthCSS
- css18 CSS Box ModelCSS
- css23 CSS Links, CursorsCSS
- CSS——CSS 值和單位CSS
- 【CSS】CSS簡介,CSS基礎選擇器詳解CSS
- CSSCSS
- css26 CSS Layout - The display PropertyCSS
- WebRTC與CSS濾鏡(CSS filter)WebCSSFilter
- CSS系列 (03):CSS三大特性CSS
- CSS中的“大白”——CSS 動畫CSS動畫
- CSS——CSS 結構和層疊CSS
- CSS基礎:CSS變數簡介CSS變數
- Css規範整理:2、css盒模型CSS模型
- CSS - 3CSS
- CSS盒子CSS
- css字型CSS
- 理解CSSCSS
- CSS中知CSS