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; 切除文字以外的背景(目前火狐不适用)
转载于:https://www.cnblogs.com/dreamerC/p/6218525.html
