border-radius 圆角
参数可为像素 也可为百分比
当一个参数时 作用范围为四个角
当两个参数时 作用范围为 左上右下 右上左下
当三个参数时 作用范围为 左上 右上左下 右下
当四个参数时 作用范围为 左上 右上 右下 左下
当参数中有‘/‘时 例如 100px/150px 则表示:X轴半径/Y轴半径
-border-image 边框背景
-border-image:图片链接 图片切割上下 图片切割左右 边框排列方式 ;
border-image-repeat:;边框排列方式
round 平铺 与repeat效果一样
repeat 重复
stretch 拉伸 默认
在-webkit-中会自动补上中间部分
-moz-border-left-colors: 边框多色彩处理
例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
注：目前只在火狐中起效果
-webkit-repeating-linear-gradient 平铺渐变
-linear-gradient: 线性渐变
IE9及9以下不支持线性渐变
通过滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);
可兼容到IE6
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 1为从left->right 0为从top->bottom
-radial-gradient:方向，关键字(可选)，颜色;
径向渐变关键字
closest-size 向最近端渐变
closest-corner 向最近角渐变
farthest-corner 向最远角渐变
contain 包含(元素将其包含 使其渐变不会超出元素周围)
cover 覆盖(渐变将整个元素铺满)
background-size:背景尺寸
background-size:contain 包含(缩小) 元素包含背景图(背景图刚好放进盒子里)
cover 覆盖(放大) 背景图等比放大后将元素填满
background-origin:背景图原点设置
background-origin:border-box; 从边框开始计算
content-box 从内容开始计算
padding-box 从内补白开始计算(默认)
background-clip: 背景裁剪
background-clip:border-box; 默认
解决背景半透明边框显示背景图片的问题:
padding-box 切除padding以外的背景
content-box 切除content以外的背景
-webkit-background-clip:text; 切除文字以外的背景(目前火狐不适用)