边框
边框的三要素
线宽度、线型、线颜色
border:1pxsolid#000;
线型（常见）：solid（实线）、dashed（虚线）、dotted（点状线）
边框的三要素小属性
border-width
border-style
border-color
四个方向的边框
border-top
border-right
border-bottom
border-left
四个方向边框的三要素小属性_用来层叠大属性
border-top -width
border-top -style
border-top -color
border-right -width
border-right -style
border-right -color
border-bottom -width
border-bottom -style
border-bottom -color
border-left -width
border-left -style
border-left -color
去掉边框
border-left：none；属性即可去掉左边框，以此类推
利用边框制作三角形
.box{
width:0;
height:0;
/*transparent表示透明色*/
border:20pxsolidtransparent;
border-top-color:red;
}
圆角
border-radius属性的值通常为px单位，表示圆角的半径
border-radius:10px;
利用圆角制作圆形
border-radius属性的值=盒子width的一半
单独设置四个圆角
border-radius:10px20px30px40px;顺序为左上、右上、右下、左下（顺时针）
也可以用小属性_用来层叠大属性
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
百分比为单位：border-radius属性的值可以用百分比做单位，表示圆角起始于每条边的哪里
border-radius:20%;
正圆形：正方形盒子设置的border-radius属性为50%
椭圆形：长方形盒子设置的border-radius属性为50%
盒子阴影
box-shadow属性
box-shadow:10px20px30pxrgba(0,0,0,.4); x偏移 y偏移 模糊量 颜色
阴影延展
box-shadow:10px20px30px 40pxrgba(0,0,0,.4); x偏移 y偏移 模糊量 阴影延展 颜色
40px是阴影延展
内阴影
box-shadow属性值前加inset单词，表示内阴影
box-shadow:inset10px20px30px 40pxrgba(0,0,0,.4);
多阴影
box-shadow属性可以用逗号隔开多个，表示携带多个阴影
box-shadow:10px20px30pxrgba(0,0,0,.4)，10px20px30pxrgba(250,0,0,.6)，inset10px20px30px 40pxrgba(0,0,0,.4);
背景
背景颜色
background-color属性 背景颜色
背景颜色可以用十六进制、rgb（）、rgba（）表示法表示
注：padding区域有背景颜色
背景图片
background-image属性用来设置背景图片，图片路径要写到url（）圆括号中，可以是相对路径，也可以是http://开头的绝对路径。
background-image:url(images/bg1.jpg);
注：如果样式表示外链式的，那么要书写从css出发到图片的路径，而不是从html出发
背景图片的重复模式
background-repeat属性用来设置背景的重复模式
值 意义
repeat； x,y均平铺（默认值）
repeat-x； x平铺
repeat-y； y平铺
no-repeat； 不平铺
背景尺寸
background-size属性用来设置背景图片的尺寸，兼容到IE9
background-size:100px200px; 宽度100像素，高度200像素
值也可以用百分数来设置，表示为盒子宽、高的百分之多少
需要等比例设置的值，写auto
background-size:100pxauto;
contain和cover是两个特殊的background-size属性的值
contain：将背景图片智能改变尺寸以容纳到盒子里：让用户看完整整张图片，不管盒子满不满
cover：将背景图片智能改变尺寸以撑满盒子：让用户看到盒子被图片盖满，不管图片完不完整
背景裁切
background-clip属性用来设置元素的背景裁切到哪个盒子，兼容到IE9
值 意义
border-box 背景延伸至边框（默认值）
padding-box 背景延伸至内边（padding），不会绘制到边框（仅在dotted、dashed边框可察觉）
content-box 背景被裁减至内容区
背景起源：
background-origin:content-box;
背景固定
background-attachment属性决定背景图像的位置在视口内固定，或者随着包含它的区块滚动
值 意义
fixed 自己滚动条不动，外部滚动条不动
local 自己滚动条动，外部滚动条动
scroll 自己滚动条不动，外部滚动条动（默认值）
背景图片位置
background-position属性可以设置背景图片出现在盒子的什么位置
background-position:100px200px;
可以用top、bottom、center、left、right描述图片出现的位置
background-position:centercenter;
css精灵
将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵，也叫做css雪碧图
css精灵可以减少HTTP请求数，加快网页显示速度。缺点就是不方便测量，后期改动麻烦
background综合属性
一些常用的背景相关小属性可以合写到一条background属性中
background:whiteurl(images/IMG_0063.JPEG)no-repeatcentercenter;
线性渐变
盒子的background-image属性可以用linear-gradient（）形式创建线性渐变背景
background-image:linear-gradient(toright,blue,red);渐变方向，开始颜色，结束颜色
渐变方向也可以写成度数
background-image:linear-gradient(45deg,blue,red);deg表示度数
可以有多个颜色值，并且可以用百分数定义它们出现的位置
background-image:linear-gradient(toright,blue,yellow 20%，red);
浏览器私有前缀
不同浏览器有不同的私有前缀，用来对试验性质的css属性加以标识
径向渐变
盒子的background-image属性可以用radial-gradient（）形式创建径向渐变背景
background-image:radial-gradient(50%50%,blue,red);
