【前段基础入门之】=＞CSS3的新增特性！

CSS3概述

• CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
• CSS3 计划在未来会按照模块化的方式去发展：查看官方文档
• CSS3 的新特性如下:
  • 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等
  • 新增了更好的视觉效果，例如：圆角、阴影、渐变等
  • 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性
  • 新增了全新的布局方案 —— 弹性盒子
  • 新增了 Web 字体，可以显示用户电脑上没有安装的字体
  • 增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度
  • 增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等
  • 增加动画与过渡效果，让效果的变换更具流线性、平滑性
  • ……
    

CSS3私有前缀

div {
    width: 400px;
    height: 400px;
    -webkit-border-radius: 20px;
}

例如代码中的 -webkit- 就是私有前缀；

其作用是：

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS特性后，就不需要私有前缀了，简而言之就是为了支持CSS的新特性，所进行的兼容性处理

• 查询 CSS3 兼容性的网站：点击查询CSS属性兼容性

常见浏览器私有前缀

• Chrome 浏览器： -webkit
• Safari 浏览器： -webkit
• Firefox 浏览器： -moz
• Edge 浏览器： -webkit
• 旧 Opera 浏览器： -o
• 旧 IE 浏览器： -ms

说明：

---

新增盒模型相关属性

怪异盒模型

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

可选属性值	描述
content-box	width 和 height 设置的是盒子内容区的大小（默认值）
border-box	width 和 height 设置的是盒子整个区域的总大小

---

拖拽调整盒子大小

使用 resize 属性可以控制是否允许用户拖拽调节元素尺寸；需搭配overflow属性开启

可选属性值	描述
none	不允许用户调整元素大小。 (默认)
both	用户可以调节元素的宽度和高度
horizontal	只允许用户可以调节元素的水平宽度
vertical	只允许用户可以调节元素的垂直高度

---

盒子阴影

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

语法：

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

取值含义：

可选属性值	描述
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;

---

不透明度

opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明

---

新增背景属性

background-origin

作用：设置背景图的定位原点

语法：

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

background-clip

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

语法：

1. border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值
2. padding-box ： 从 padding 区域开始向外裁剪背景
3. content-box ： 从 content 区域开始向外裁剪背景
4. text ：背景图只呈现在文字上

background-size

作用：设置背景图的尺寸

语法：

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

background-size: 300px 200px;

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

background-size: 100% 100%;

3. auto ： 背景图片的真实大小。 —— 默认值

4. contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

background-size: contain;

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

background-size: cover;

多背景图

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

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
            url(../images/bg-rt.png) no-repeat right top,
            url(../images/bg-lb.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom;

backgorund 复合属性

background: color url repeat position / size origin clip

---

新增边框属性

边框圆角

在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角

• 同时设置四个角的圆角

border-radius:10px;

• 分开设置每个角的圆角

属性名	描述
border-top-left-radius	设置左上角圆角半径： 1. 一个值是正圆半径， 2. 两个值分别是椭圆的 x 半径、 y 半径
border-top-right-radius	设置右上角圆角半径： 1. 一个值是正圆半径， 2. 两个值分别是椭圆的 x 半径、 y 半径
border-bottom-right-radius	设置右下角圆角半径： 1. 一个值是正圆半径， 2. 两个值分别是椭圆的 x 半径、 y 半径
border-bottom-left-radius	设置左下角圆角半径： 1. 一个值是正圆半径， 2. 两个值分别是椭圆的 x 半径、 y 半径

综合写法：

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

边框外轮廓

• outline-width ：外轮廓的宽度
• outline-color ：外轮廓的颜色
• outline-style ：外轮廓的风格
  • none： 无轮廓
  • dotted： 点状轮廓
  • dashed ： 虚线轮廓
  • solid ： 实线轮廓
  • double ： 双线轮廓
• outline-offset 设置外轮廓与边框的距离，正负值都可以设置

outline 复合属性

outline:50px solid blue;

---

新增文本属性

文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影

语法

text-shadow: h-shadow v-shadow blur color;

属性值	描述
h-shadow	必需写，水平阴影的位置。允许负值
v-shadow	必需写，垂直阴影的位置。允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色,默认黑色

文本换行

在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式

• 常用值如下：

属性值	描述
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	按代码原样输出，与 pre 标签的效果相同
pre-wrap	在 pre 效果的基础上，超出元素边界自动换行
pre-line	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
nowrap	强制不换行

文本溢出

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式

• 常用值如下：

属性值	描述
clip	当内联内容溢出时，将溢出部分裁切掉。 （默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为 ...

文本修饰

CSS3 升级了 text-decoration 属性，让其变成了复合属性

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor

• 子属性取值及其含义：

  • text-decoration-line：设置文本装饰线的位置

    • none ： 指定文字无装饰 （默认值）
    • underline ： 指定文字的装饰是下划线
    • overline ： 指定文字的装饰是上划线
    • line-through ： 指定文字的装饰是贯穿线

  • text-decoration-style ：文本装饰线条的形状

    • solid ： 实线 （默认）
    • double ： 双实线
    • dotted ： 点状线条
    • dashed ： 虚线
    • wavy ： 波浪线

  • text-decoration-color 文本装饰线条的颜色

文本描边

注意：文字描边功能仅 webkit 内核浏览器支持

• -webkit-text-stroke-width ：设置文字描边的宽度，写长度值
• -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值
• -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————