本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。
以下是正文。
前言
我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。
颜色
CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
RGBA、HSLA可应用于所有使用颜色的地方。
RGBA 举例：
???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 举例：
???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 的值该设置多少，我们不妨来看一下色盘：
推荐链接：配色宝典
关于设置透明度的其他方式：
（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
文本
text-shadow：设置文本的阴影
格式举例：
???text-shadow: 20px 27px 22px pink;参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
效果举例：
举例：凹凸文字效果
text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
代码如下：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????body { ???????????background-color: #666; ???????} ???????div { ???????????font-size: 100px; ???????????text-align: center; ???????????font-weight: bold; ???????????font-family: "Microsoft Yahei"; ???????????color: #666; ???????} ???????/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/ ???????.tu { ???????????text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; ???????} ???????.ao { ???????????text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; ???????} ???</style></head><body><div class="ao">生命壹号</div><div class="tu">生命壹号</div></body></html>效果如下：
上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。
盒模型中的 box-sizing 属性
我们在之前的文章中专门讲过盒子模型。
CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
这就需要用到 box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。
外加模式：（css的默认方式）
???box-sizing: content-box;解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
内减模式：【需要注意】
???box-sizing: border-box;解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
处理兼容性问题：私有前缀
通过网址http://caniuse.com/ 可以查询CSS3各特性的支持程度。
处理兼容性问题的常见方法：为属性添加私有前缀。
如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。
私有前缀的举例：
比如说，我想给指定的div设置下面这样一个属性：
???background: linear-gradient(left, green, yellow);上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
如果直接这样写属性，是看不到效果的：
此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。
格式如下：
???-webkit-: 谷歌 苹果 ???-moz-:火狐 ???-ms-：IE ???-o-：欧朋格式举例如下：
???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;举例：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????.parent { ???????????width: 400px; ???????} ???????.box { ???????????width: 100px; ???????????height: 100px; ???????????float: left; ???????????border: 1px solid rgb(144, 12, 63); ???????????margin: 20px; ???????????text-align: center; ???????????line-height: 100px; ???????????color: #fff; ???????????font-size: 50px; ???????????background-color: rgb(255, 141, 26); ???????} ???????/*画圆形的方式一*/ ???????.box:nth-child(1) { ???????????border-radius: 100px; ???????} ???????/*画圆形的方式二*/ ???????.box:nth-child(2) { ???????????border-radius: 50%; ???????} ???????.box:nth-child(3) { ???????????border-radius: 200px 0 0 0; ???????} ???????.box:nth-child(4) { ???????????border-radius: 100px/50px; ???????} ???????.box:nth-child(5) { ???????????border-radius: 10%; ???????} ???????.box:nth-child(6) { ???????????border-radius: 0 100px; ???????} ???</style></head><body><div class="parent"> ???<div class="box">1</div> ???<div class="box">2</div> ???<div class="box">3</div> ???<div class="box">4</div> ???<div class="box">5</div> ???<div class="box">6</div></div></body></html>效果如下：
边框阴影：box-shadow 属性
格式举例：
???box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 ???box-shadow: 15px 21px 48px -2px #666;参数解释：
水平偏移：正值向右 负值向左。
垂直偏移：正值向下 负值向上。
模糊程度：不能为负值。
效果如下：
另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：
???box-shadow:3px 3px 3px 3px #666 inset;效果如下：
20180207_2028.png
注意：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。
边框图片
边框图片有以下属性：
???/* 边框图片的路径*/ ???border-image-source: url("images/border.png"); ???/* 图片边框的裁剪*/ ???border-image-slice: 27; ???/*图片边框的宽度*/ ???border-image-width: 27px; ???/*边框图片的平铺*/ ???/* repeat :正常平铺 但是可能会显示不完整*/ ???/*round: 平铺 但是保证 图片完整*/ ???/*stretch: 拉伸显示*/ ???border-image-repeat: stretch;我们也可以写成一个综合属性：
????border-image: url("images/border.png") 27/20px round;这个属性要好好理解，我们假设拿下面这张图来作为边框图片：
这张图片将会被“切割”成九宫格形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
再具体一点：
背景属性
背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
背景尺寸：background-size属性
background-size属性：设置背景图片的尺寸。
格式举例：
???/* 宽、高的具体数值 */ ???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 属性：控制背景从什么地方开始显示。
格式举例：
???/* 从 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 的部分，将裁剪掉
假设现在有这样的属性设置：
???background-origin: border-box; ???background-clip: content-box;上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。
同时设置多个背景
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
代码举例：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????.box { ???????????height: 416px; ???????????border: 1px solid #000; ???????????margin: 100px auto; ???????????/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */ ???????????background: url(images/bg1.png) no-repeat left top, ???????????url(images/bg2.png) no-repeat right top, ???????????url(images/bg3.png) no-repeat right bottom, ???????????url(images/bg4.png) no-repeat left bottom, ???????????url(images/bg5.png) no-repeat center; ???????} ???</style></head><body><div class="box"></div></body></html>实现效果如下：
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
渐变分为：
线性渐变：沿着某条直线朝一个方向产生渐变效果。
径向渐变：从一个中心点开始沿着四周产生渐变效果。
重复渐变。
见下图：
注意，渐变属于背景图片属性background-image的属性值。我们依次来看一下。
线性渐变
格式：
???background-image: linear-gradient(方向, 起始颜色, 终止颜色); ???background-image: linear-gradient(to right, yellow, green);参数解释：
- 方向可以是：
to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。
格式举例：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div { ???????????width: 500px; ???????????height: 100px; ???????????margin: 10px auto; ???????????border: 1px solid #000; ???????} ???????/* 语法： ???????????linear-gradient(方向，起始颜色，终止颜色); ???????????方向：to left ??to right ?to top ??to bottom 角度 30deg ???????????起始颜色 ???????????终止颜色 ???????*/ ???????div:nth-child(1) { ???????????background-image: linear-gradient(to right, yellow, green); ???????} ???????/* 不写方向，表示默认的方向是：从上往下 */ ???????div:nth-child(2) { ???????????background-image: linear-gradient(yellow, green); ???????} ???????/* 方向可以指定角度 */ ???????div:nth-child(3) { ???????????width: 100px; ???????????height: 100px; ???????????background-image: linear-gradient(135deg, yellow, green); ???????} ???????/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */ ???????div:nth-child(4) { ???????????background-image: linear-gradient(to right, ???????????yellow 0%, ???????????red 40%, ???????????green 70%, ???????????blue 100%); ???????} ???????/* 颜色之间，出现突变 */ ???????div:nth-child(5) { ???????????background-image: linear-gradient(45deg, ???????????yellow 0%, ???????????yellow 25%, ???????????blue 25%, ???????????blue 50%, ???????????red 50%, ???????????red 75%, ???????????green 75%, ???????????green 100% ???????????); ???????} ???????div:nth-child(6) { ???????????background-image: linear-gradient(to right, ???????????#000 0%, ???????????#000 25%, ???????????#fff 25%, ???????????#fff 50%, ???????????#000 50%, ???????????#000 75%, ???????????#fff 75%, ???????????#fff 100% ???????????); ???????} ???</style></head><body><div></div><div></div><div></div><div></div><div></div><div></div></body></html>效果如下：
举例：按钮
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS3 渐变</title> ???<style> ???????html, body { ???????????height: 100%; ???????} ???????body { ???????????margin: 0; ???????????padding: 0; ???????????background-color: #f8fcd4; ???????} ???????.nav { ???????????width: 800px; ???????????text-align: center; ???????????padding-top: 50px; ???????????margin: 0 auto; ???????} ???????/*设置按钮基本样式*/ ???????.nav a { ???????????display: inline-block; ???????????width: 100px; ???????????height: 30px; ???????????text-align: center; ???????????line-height: 30px; ???????????font-size: 14px; ???????????color: #fff; ???????????text-decoration: none; ???????????border: 1px solid #e59500; ???????????background-color: #FFB700; ???????????background-image: linear-gradient( ???????????????????to bottom, ???????????????????#FFB700 0%, ???????????????????#FF8C00 100% ???????????); ???????} ???</style></head><body><div class="nav"> ???<a href="javascript:;">导航1</a> ???<a href="javascript:;">导航2</a> ???<a href="javascript:;">导航3</a> ???<a href="javascript:;">导航4</a> ???<a href="javascript:;">导航5</a> ???<a href="javascript:;">导航6</a></div></body></html>效果：
径向渐变
格式：
???background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); ???background-image: radial-gradient(100px at center,yellow ,green);解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
当然，还有其他的各种参数。格式举例：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div { ???????????width: 250px; ???????????height: 250px; ???????????border: 1px solid #000; ???????????margin: 20px; ???????????float: left; ???????} ???????/* ???????????径向渐变： ???????????radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）; ???????????中心点位置：at ?left ?right ?center bottom ?top ???????*/ ???????/*辐射半径为100px，中心点在中间*/ ???????div:nth-child(1) { ???????????background-image: radial-gradient(100px at center, yellow, green); ???????} ???????/*中心点在左上角*/ ???????div:nth-child(3) { ???????????background-image: radial-gradient(at left top, yellow, green); ???????} ???????div:nth-child(2) { ???????????background-image: radial-gradient(at 50px 50px, yellow, green); ???????} ???????/*设置不同的颜色渐变*/ ???????div:nth-child(4) { ???????????background-image: radial-gradient(100px at center, ???????????yellow 0%, ???????????green 30%, ???????????blue 60%, ???????????red 100%); ???????} ???????/*如果辐射半径的宽高不同，那就是椭圆*/ ???????div:nth-child(5) { ???????????background-image: radial-gradient(100px 50px at center, yellow, green); ???????} ???</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body></html>效果如下：
举例：利用径向渐变和边框圆角的属性，生成按钮。代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS3 渐变</title> ???<style> ???????div:nth-child(1) { ???????????width: 200px; ???????????height: 200px; ???????????margin: 40px auto; ???????????border-radius: 100px; ???????????background-color: yellowgreen; ???????} ???????div:nth-child(2) { ???????????width: 200px; ???????????height: 200px; ???????????margin: 40px auto; ???????????border-radius: 100px; ???????????background-color: yellowgreen; ???????????background-image: radial-gradient( ???????????????????200px at 100px 100px, ???????????????????rgba(0, 0, 0, 0), ???????????????????rgba(0, 0, 0, 0.5) ???????????); ???????} ???</style></head><body><div></div><div></div></body></html>效果如下：
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
CSS3的更多属性，且听下文继续。
我的公众号
想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：