background

英 [?b?kgra?nd]   美 [?b?k?ɡra?nd]  

n.（畫等的）背景;底色;背景資料;配樂

復(fù)數(shù)： backgrounds

clip

英 [kl?p]   美 [kl?p]  

n.修剪;（塑料或金屬的）夾子;回紋針;剪報(bào)

vt.& vi.用別針別在某物上，用夾子夾在某物上

vt.剪;剪掉;縮短;給…剪毛（或發(fā)）

vi.修剪;剪;剪下報(bào)刊上的文章（或新聞、圖片等）;迅速行動(dòng)

第三人稱單數(shù)： clips 復(fù)數(shù)： clips 現(xiàn)在分詞： clipping 過去式： clipped 過去分詞： clipped clipt

css background-clip屬性 語(yǔ)法

background-clip屬性怎么用？

background-clip屬性指定元素背景所在的區(qū)域,。語(yǔ)法：background-clip: border-box|padding-box|content-box；其中，border-box（邊框以內(nèi)的區(qū)域），padding-box（padding區(qū)域以內(nèi)區(qū)域），content-box（內(nèi)容區(qū)域以內(nèi)的區(qū)域）。

作用：規(guī)定背景的繪制區(qū)域。

語(yǔ)法：background-clip: border-box|padding-box|content-box;

說(shuō)明：border-box    背景被裁剪到邊框盒。padding-box    背景被裁剪到內(nèi)邊距框。  content-box    背景被裁剪到內(nèi)容框。

注釋：Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。

css background-clip屬性 示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

熱門推薦