文章目录
CSS3概述
CSS3私有前缀
div {
width: 400px;
height: 400px;
-webkit-border-radius: 20px;
}
- 查询
CSS3 兼容性的网站：点击查询CSS属性兼容性
常见浏览器私有前缀
Chrome浏览器：-webkitSafari浏览器：-webkitFirefox浏览器：-mozEdge浏览器：-webkit- 旧
Opera浏览器：-o - 旧
IE浏览器：-ms
说明：
新增盒模型相关属性
怪异盒模型
| 可选属性值 | 描述 |
|---|---|
content-box | width 和 height 设置的是盒子内容区的大小（默认值） |
border-box | width 和 height 设置的是盒子整个区域的总大小 |
拖拽调整盒子大小
| 可选属性值 | 描述 |
|---|---|
none | 不允许用户调整元素大小。 (默认) |
both | 用户可以调节元素的宽度和高度 |
horizontal | 只允许用户可以调节元素的水平宽度 |
vertical | 只允许用户可以调节元素的垂直高度 |
盒子阴影
语法：
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;
不透明度
新增背景属性
background-origin
语法：
padding-box：从padding区域开始显示背景图像。—— 默认值border-box： 从border区域开始显示背景图像content-box： 从content区域开始显示背景图像
background-clip
语法：
border-box： 从border区域开始向外裁剪背景。 —— 默认值padding-box： 从padding区域开始向外裁剪背景content-box： 从content区域开始向外裁剪背景text：背景图只呈现在文字上
background-size
语法：
- 用长度值指定背景图片大小，
不允许负值
background-size: 300px 200px;
- 用百分比指定背景图片大小，
不允许负值
background-size: 100% 100%;
-
auto： 背景图片的真实大小。 —— 默认值 -
contain： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
background-size: contain;
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-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;
新增文本属性
文本阴影
语法
text-shadow: h-shadow v-shadow blur color;
| 属性值 | 描述 |
|---|---|
h-shadow | 必需写，水平阴影的位置。允许负值 |
v-shadow | 必需写，垂直阴影的位置。允许负值 |
blur | 可选，模糊的距离 |
color | 可选，阴影的颜色,默认黑色 |
文本换行
- 常用值如下：
| 属性值 | 描述 |
|---|---|
normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） |
pre | 按代码原样输出，与 pre 标签的效果相同 |
pre-wrap | 在 pre 效果的基础上，超出元素边界自动换行 |
pre-line | 在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略 |
nowrap | 强制不换行 |
文本溢出
- 常用值如下：
| 属性值 | 描述 |
|---|---|
clip | 当内联内容溢出时，将溢出部分裁切掉。 （默认值） |
ellipsis | 当内联内容溢出块容器时，将溢出部分替换为 ... |
文本修饰
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：复合属性，设置文字描边宽度和颜色
