【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

写在前面

---

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

---

目录

写在前面

1. 新增盒模型相关属性

1.1 box-sizing 怪异盒模型

1.2 resize 调整盒子大小

1.3 box-shadow 盒子阴影

1.4 opacity 不透明度

 2. CSS3 新增背景属性

2.1 background-origin

2.2 background-clip

2.3 background-size

2.4 backgorund 复合属性

2.5 多背景图

结语

---

【往期回顾】

【CSS3系列】第一章 · CSS3新增的三种基本属性

---

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

---

1. 新增盒模型相关属性

---

1.1 box-sizing 怪异盒模型

• 使用 box-sizing 属性可以设置盒模型的两种类型

---

1.2 resize 调整盒子大小

• 使用 resize 属性可以控制是否允许用户调节元素尺寸。

    
    
    


    

        
123
    

---

1.3 box-shadow 盒子阴影

• 使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

各个值的含义：

• 默认值： box-shadow:none 表示没有阴影

示例：

/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

    
    
    


    
你好啊

---

1.4 opacity 不透明度

• opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。
• opacity 与 rgba 的区别？
  • opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
  • rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

    
    
    


    
你好啊
    

        
        
你瞅啥
    

---

 2. CSS3 新增背景属性

---

2.1 background-origin

作用：设置背景图的原点。

语法

• padding-box ：从 padding 区域开始显示背景图像。—— 默认值
• border-box ：从 border 区域开始显示背景图像。
• content-box ：从 content 区域开始显示背景图像。

    
    
    


    
你好啊

---

2.2 background-clip

作用：设置背景图的向外裁剪的区域。

语法

• border-box ：从 border 区域开始向外裁剪背景。 —— 默认值
• padding-box ：从 padding 区域开始向外裁剪背景。
• content-box ：从 content 区域开始向外裁剪背景。
• text ：背景图只呈现在文字上。
• 注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。

    
    
    


    
你好啊

---

2.3 background-size

作用：设置背景图的尺寸。

语法：

• 用长度值指定背景图片大小，不允许负值。

background-size: 300px 200px;

• 用百分比指定背景图片大小，不允许负值。

background-size: 100% 100%;

• auto ：背景图片的真实大小。 —— 默认值
• contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

background-size: contain;

• cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择

background-size: cover;

---

2.4 backgorund 复合属性

语法：

background: color url repeat position / size origin clip

注意：

• origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。
• size 的值必须写在 position 值的后面，并且用 / 分开。

    
    
    


    
你好啊

---

2.5 多背景图

• CSS3 允许元素设置多个背景图片

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力