> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 前言
我们在上一篇文章中学习了[CSS3的选择器](http://www.cnblogs.com/smyhvae/p/8426799.html)，本文来学一下CSS3的一些属性。
本文主要内容：
- 颜色
- 文本
- 盒模型中的 box-sizing 属性
- 处理兼容性问题：私有前缀
- 边框
- 背景属性
- 渐变
## 颜色
CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
RGBA、HSLA可应用于**所有**使用颜色的地方。
**RGBA 举例**：
```javascript
background-color: rgba(0, 0, 255, 0.3);
border: 30px solid rgba(0, 255, 0, 0.3);
```
解释：
- RGBA 即：Red、Green、Blue、Alpha
- R、G、B 的取值范围是：0~255
**HSLA 举例**：
```javascript
background-color: hsla(240,50%,50%,0.4);
```
解释：
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
- `A` 透明度，取值范围 0~1。
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
**关于设置透明度的其他方式：**
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
## 文本
### text-shadow：设置文本的阴影
格式举例：
```javascript
text-shadow: 20px 27px 22px pink;
```
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
效果举例：
### 举例：凹凸文字效果
text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
代码如下：
```html
生命壹号
生命壹号
```
效果如下：
上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。
## 盒模型中的 box-sizing 属性
我们在**[之前的文章](http://www.cnblogs.com/smyhvae/p/7256371.html)**中专门讲过盒子模型。
CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽度和高度的计算方式**。
这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`。解释如下。
**外加模式：**（css的默认方式）
```javascript
box-sizing: content-box;
```
解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
**内减模式：**【需要注意】
```javascript
box-sizing: border-box;
```
解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
## 处理兼容性问题：私有前缀
通过网址 可以查询CSS3各特性的支持程度。
处理兼容性问题的常见方法：为属性添加**私有前缀**。
如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。
**私有前缀的举例**：
比如说，我想给指定的div设置下面这样一个属性：
```css
background: linear-gradient(left, green, yellow);
```
上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
如果直接这样写属性，是看不到效果的：
此时，我们可以**为浏览器添加不同的私有前缀**，属性就可以生效了。
格式如下：
```html
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：IE
-o-：欧朋
```
格式举例如下：
```css
background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);
```
效果如下：
## 边框
边框的属性很多，其中**边框圆角**和**边框阴影**这两个属性，应用十分广泛，兼容性也相对较好，且符合**渐进增强**的原则，需要重点熟悉。
### 边框圆角：`border-radius` 属性
边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
单个属性的写法：
```
border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;
```
复合写法：
```
border-radius: 60px/120px; //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
border-radius: 20px 60px;
```
最简洁的写法：（四个角的半径都相同时）
```
border-radius: 60px;
```
举例：
```html
```
效果如下：
### 边框阴影：`box-shadow` 属性
格式举例：
```javascript
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
```
参数解释：
- 水平偏移：正值向右 负值向左。
- 垂直偏移：正值向下 负值向上。
- 模糊程度：不能为负值。
效果如下：
另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：
```javascript
box-shadow:3px 3px 3px 3px #666 inset;
```
效果如下：
20180207_2028.png
**注意**：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。
### 边框图片
边框图片有以下属性：
```javascript
/* 边框图片的路径*/
border-image-source: url("images/border.png");
/* 图片边框的裁剪*/
border-image-slice: 27;
/*图片边框的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
```
我们也可以写成一个综合属性：
```javascript
border-image: url("images/border.png") 27/20px round;
```
这个属性要好好理解，我们假设拿下面这张图来作为边框图片：
这张图片将会被“切割”成**九宫格**形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
再具体一点：
### 常见的边框图片汇总
```html
```
## 背景属性
背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
### 背景尺寸：`background-size`属性
`background-size`属性：设置背景图片的尺寸。
格式举例：
```javascript
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比 */
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
background-size: cover;
/* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。 */
background-size: contain;
```
这里我们对属性值 `cover` 和 `contain`进行再次强调：
- `cover`：会自动调整缩放比例，保证图片始终**填充满**背景区域，如有**溢出部分**则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。
- `contain`：会自动调整缩放比例，保证图片始终**完整显示**在背景区域。也就是说，保证背景图片最大化地在盒子里，**等比例**显示，但不保证能铺满盒子。
### 背景原点：`background-origin` 属性
`background-origin` 属性：控制背景从什么地方开始显示。
格式举例：
```javascript
/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box; //默认值
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;
```
如果属性值设置成了`border-box`，那边框部分也会显示图片哦。
如下图所示：
### 背景裁剪：`background-clip`属性
格式举例：
`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
- `border-box` 超出 border-box 的部分，将裁剪掉
- `padding-box` 超出 padding-box 的部分，将裁剪掉
- `content-box` 超出 content-box 的部分，将裁剪掉
假设现在有这样的属性设置：
```javascript
background-origin: border-box;
background-clip: content-box;
```
上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。
### 同时设置多个背景
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
代码举例：
```html
```
实现效果如下：
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
## 渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
渐变分为：
- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
- 重复渐变。
见下图：
注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
### 线性渐变
格式：
```javascript
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
```
参数解释：
- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
格式举例：
```html
```
效果如下：
**举例**：按钮
```html
CSS3 渐变
```
效果：
### 径向渐变
格式：
```
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
```
解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
当然，还有其他的各种参数。格式举例：
```html
```
效果如下：
**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下：
```html
CSS3 渐变
```
效果如下：
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
CSS3的更多属性，且听下文继续。
## 我的公众号
想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
