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

文章目录

• CSS3概述
• 新增盒模型相关属性
• 新增背景属性
• 新增边框属性
• 新增文本属性

CSS3概述

CSS3私有前缀

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

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

常见浏览器私有前缀

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

说明：

---

新增盒模型相关属性

怪异盒模型

---

拖拽调整盒子大小

---

盒子阴影

语法：

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;

---

不透明度

---

新增背景属性

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;

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

background-size: 100% 100%;

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

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

background-size: contain;

1. 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

---

新增边框属性

边框圆角

• 同时设置四个角的圆角

border-radius:10px;

• 分开设置每个角的圆角

综合写法：

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;

---

新增文本属性

文本阴影

语法

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

文本换行

• 常用值如下：

文本溢出

• 常用值如下：

文本修饰

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

---