渐变背景
像比较规则的渐变背景可以切1px渐变背景图片平铺，像不规则的渐变只能引入整张图片。通过图片来实现渐变背景，可拓展性比较低，还会影响网页的加载速率。css3提出渐变背景的属性：线性渐变和径向渐变。
渐变背景可以看作一个“图像”，使用属性background-image。
线性渐变
概念：渐变的颜色过渡是沿着一条直线进行渐变。语法：
background-image:linear-gradient(渐变线方向，颜色1 位置，颜色2 位置，颜色3 位置)；
色标
是由一个颜色和一个位置构成，决定了渐变过渡的范围。颜色：rgb（）、单词、#十六进制等等；
位置：百分比、像素；
注意：
如果不设置位置，只设置颜色，默认是均匀渐变；
如果首尾不设置位置，默认是在0%或100%；
如果首尾颜色的位置不在0%或100时，颜色默认纯色填充。
background-image：linear-gradient（red 20%，green 50%）;
0%-20%是红色，20%-50%是红色到绿色的渐变，50%-100%是绿色
如果两个色标的位置相同，会出现断层的效果，因为两个颜色渐变的范围是0，无法显示渐变过渡的效果。
渐变线
决定了渐变的方向。取值：
to 结束的方向（left top right bottom）
to bottom 默认值 ——180deg或-180deg
to top——0deg
to left—— -90deg或270deg
to right—— 90deg或-270deg
to left top —— -45deg或315deg
to right top —— 45deg或-315deg
to left bottom —— -135deg或225deg
to right bottom —— 135deg或-225deg
角度以deg为单位，垂直向上是0deg，顺时针是正方向，逆时针是负方向。
重复性渐变
重复性渐变可以实现线性渐变的重复效果，使色标在渐变的方向上无限重复。注意：只有首尾颜色位置不在0%或者100%时，重复渐变才生效。
bckground-image:repeating-linear-gradient(pink 0px,pink 20px.yellow 20px.yellow 40px);
注意：多种渐变或图片同时设置在background-image属性上时，中间使用逗号隔开，前面的图片或者渐变背景会盖住后面的。
径向渐变
概念：径向渐变就是椭圆渐变，渐变是沿着椭圆的半径进行渐变，圆其实是一种特殊的椭圆。分为两部分：
椭圆：用来控制渐变的位置、大小、形状等。
色标：是由一个颜色和一个位置，用来控制渐变的过渡效果。
语法：
background-image:radial-gradient(大小 形状 at x轴 y轴，颜色1 位置，颜色2 位置，颜色3 位置)
大小：
farthest-corner：半径是从圆心到最远的角；
closest-corner：半径是从圆心到最近的角；
farthest-side：半径是从圆心到最远边；
closest-side：半径从圆心到最近边；
形状：
ellipse：默认值，椭圆；
circle：正圆；
圆心：at x轴 y轴，可以控制椭圆的位置，默认圆心在盒子的中心点，默认为center center；
单词：top left right bottom center 两两搭配使用。
像素：盒子左上角为0px 0px；
百分比：参考的是盒子的宽度和高度，50% 50%相当于center center；
重复径向渐变
径向渐变可以重复显示，无限重复；注意：重复径向渐变的首尾的颜色的位置不在0%或100%，重复渐变才有效。
语法：
background-image：repeating-radial-gradient（circle，#999 0px，#999 10px，#666 10px，#666 20px）；
圆角
盒子默认四个角都是直角，通过border-radius设置圆角。语法：
分别设置四个角的圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
复合属性
border-radius
一个值：四个角同时设置
两个值：左上右下 右上左下
三个值：左上 右上左下 右下
四个值：左上 右上 右下 左下
八个值：10px 10px 10px 10px/20px 20px 20px 20px
/前面代表每个角的水平半径，/后面代表每个角的垂直半径
圆角的形成：由水平半径和垂直半径决定椭圆或正圆的一段圆弧。
如果水平半径和垂直半径相等，取的是正圆的圆弧，如果不等，取的是椭圆的圆弧。
内半径和外半径
如果盒子设置边框，边框宽度大于圆角的半径时，边框里边没有圆角效果；如果边框宽度小于圆角的半径，边框外层的圆角是外半径决定，边框内层的圆角是由内半径决定。
内半径=外半径-边框的宽度；
注意：
边框宽度大于圆角的半径时，边框里边没有圆角效果，因为内半径为0或负数，没有圆角大小，边框内层没有圆角效果。
圆角的应用
（1）绘制正圆：盒子的宽度和高度一样，设置border-radius：50%；（2）绘制胶囊状：设置border-radius为短边的一半。
盒子阴影
给盒子添加阴影，使用box-shadow；语法：
box-shadow：x轴偏移量 y轴偏移量 虚化程度（模糊程度） 阴影大小 颜色；
虚化程度和阴影大小可以不写
box-shadow：x轴偏移量 y轴偏移量 颜色；
将外阴影设置为内阴影
box-shadow：x轴偏移量 y轴偏移量 虚化程度（模糊程度） 阴影大小 颜色 inset；
可以设置多层阴影，中间使用逗号隔开
box-shadow：x轴偏移量 y轴偏移量 虚化程度（模糊程度） 阴影大小 颜色，x轴偏移量 y轴偏移量 虚化程度（模糊程度） 阴影大小 颜色，x轴偏移量 y轴偏移量 虚化程度（模糊程度） 阴影大小 颜色；
文字阴影
给文本添加阴影，使用text-shadow属性。语法：
text-shadow：x轴偏移量 y轴偏移量 虚化程度 颜色；
