background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: inherit;
background-clip: initial;
background-clip: unset;
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
margin
:
1em
0
;
padding
:
1
.
4em
;
background
:
linear
-
gradient
(
60deg
,
red
,
yellow
,
red
,
yellow
,
red
)
;
font
:
900
1
.
3em sans
-
serif
;
text
-
decoration
:
underline
;
.
border
-
box
{
background
-
clip
:
border
-
box
;
}
.
padding
-
box
{
background
-
clip
:
padding
-
box
;
}
.
content
-
box
{
background
-
clip
:
content
-
box
;
}
.
text
{
background
-
clip
:
text
;
color
:
rgba
(
0
,
0
,
0
,
.
2
)
;
前端祖传三件套CSS的CSS3新特性之背景
在现代的前端开发中，CSS3已经成为了很多前端开发者必备的技能之一。其中，CSS3提供了丰富的新特性，其中包括了背景相关的新特性。本文将为大家介绍CSS3中与背景相关的新特性，包括背景色渐变、背景图片相关属性、背景滤镜等。
【web前端开发】CSS背景相关内容
背景颜色，属性名:background-color，取值:表示颜色的取值都可以填写,如:rgb。注意点:背景颜色默认是透明的，背景颜色不影响盒子的大小，实用技巧:在平时使用一些盒子时,可以给盒子设置背景颜色,这样可以看清盒子的大小和位置。
