【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性

古城微笑少年丶 2022-12-19 09:25 189阅读 0赞

**知识点：**CSS3新增背景属性、字体文本相关属性、盒模型属性、变形动画属性、多列属性。

# 1、CSS3 新增背景属性 #

## 1.1  background-clip  ##

background-clip属性用来设置**背景的覆盖范围**，属性值有3种：

<table style="width:484px;"> 
 <tbody> 
  <tr> 
   <th style="width:116px;">&nbsp; &nbsp; 属性值</th> 
   <th style="width:365px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 说明</th> 
  </tr> 
  <tr> 
   <td style="width:116px;">border-box</td> 
   <td style="width:365px;">默认值。背景显示区域到边框。</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">padding-box</td> 
   <td style="width:365px;">背景显示区域到内边距框。</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">content-box</td> 
   <td style="width:365px;">背景显示区域到内容框。</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: /images/20221120/7acde54e2f28443a81384adb7d83011e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 和css3 新增属性

HTML5和CSS3新增属性新增选择器 E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 E:nth-of-type(n)：匹配父元素的第n个

Dear 丶/ 2023年06月09日 14:21/ 0 赞/ 18 阅读

相关【HTML5】Web前端——第六课：CSS3 的变形属性、过渡属性、动画属性、多列属性

知识点：CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性先导知识：[【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属

朴灿烈づ我的快乐病毒、/ 2022年12月22日 09:13/ 0 赞/ 159 阅读

相关【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性

知识点：CSS3新增背景属性、字体文本相关属性、盒模型属性、变形动画属性、多列属性。 1、CSS3 新增背景属性 1.1 background-clip

古城微笑少年丶/ 2022年12月19日 09:25/ 0 赞/ 190 阅读

相关 CSS3新增属性----背景和边框

一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面 CSS3 边

亦凉/ 2022年12月01日 14:14/ 0 赞/ 266 阅读

相关 CSS3 新增属性（边框，背景，文字，颜色属性）

CSS3 新增属性边框属性背景属性文字属性颜色属性 > 1. 边框属性 <table> <thead> <tr>

秒速五厘米/ 2022年10月13日 01:46/ 0 赞/ 260 阅读

相关 HTML5新增属性

-------------------- typora-root-url: ./ HTML5新增元素及属性 1、HTML5阶段内容 HTML5新增元素、属性

青旅半醒/ 2022年09月07日 14:33/ 0 赞/ 272 阅读

相关 HTML5新增标签及CSS3新增属性

一、h5新增标签 <table style="width:860px;text-align:center;"> <thead> <tr> <th sty

比眉伴天荒/ 2022年05月30日 05:35/ 0 赞/ 370 阅读

相关 css3新增属性

一. box-shadow(阴影效果) 使用: box-shadow: 20px 10px 0 \000; \-moz-box-shadow: 20px 10px 0 \

喜欢ヅ旅行/ 2022年04月22日 13:40/ 0 赞/ 295 阅读

相关 CSS属性（背景属性）

1.背景属性 ![1468469-20190106144542211-773634552.png][] ![1468469-20190106151658909-166036

た入场券/ 2021年12月24日 01:37/ 0 赞/ 466 阅读

相关【CSS3】新增属性

一. box-shadow(阴影效果) 使用: box-shadow: 20px 10px 0 \000; \-moz-box-shadow: 20px 10px 0 \

╰+哭是因爲堅強的太久メ/ 2021年12月23日 03:59/ 0 赞/ 480 阅读