1、圆角:border-radius
- 1个:都一样 border-radius: 一样
- 2个:对角 border-radius: 左上&右下 右上&左下
- 3个:斜对角 border-radius: 左上 右上&左下 右下
- 4个:全部,顺时针 border-radius: 左上 右上 右下 左下
- border-radius: 1-4个数字 / 1-4个数字——前面是水平半径,后面是垂直半径border-radius: 10px/5px;
- 不给“/”则水平和垂直一样
2、边框
(1)边框图片:border-image
- border-image-sourceg 引入图片
- border-image-slice 切割图片
- border-image-width 边框宽度
- border-image-repeat 图片的排列方式:round 平铺,repeat 重复,stretch拉伸
(2)边框颜色 border-colors(火狐下)
3、线性渐变
(1)格式
- 线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…)
- 只能用在背景上
(2)参数
- 起点:从什么方向开始渐变
默认:top left(左上角)
- 角度:从什么角度开始渐变
xxx deg的形式(逆时针旋转)
- 点:渐变点的颜色和位置
black 50%,位置可选
(3)实例:background-image:-webit-linear-gradient(60deg,red 0,blue 40%,green 100%)
(4)平铺:background:-webit-repeating-linear-gradient(15deg,green ,green 10px,#fff 10px,#fff 20px,);
(5)兼容IE9以下:(gradientType=1为从左往右,0为从上往下)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
4、径向渐变
(1)格式
- 线性渐变格式 radial-gradient([<起点>]? [<形状> || <大小>]? <点>, <点>…)
(2)参数
- 起点:可以是关键字(left,top,right,bottom),具体数值或百分比
- 形状:ellipse(椭圆)、circle(圆形)
-
大小 :具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover));
注意:firefox目前只支持关键字
- 点:渐变点的颜色和位置
black 50%,位置可选
5、背景
(1)多背景:逗号分开 background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
(2)背景尺寸:background-size:x y
- background-size:100% 100%
- Cover 放大
- Contain 缩小
(3)背景原点:background-origin : border | padding | content
- border-box: 从border区域开始显示背景。
- padding-box: 从padding区域开始显示背景。
- content-box: 从content区域开始显示背景。
(4)背景裁剪:background-clip: border | padding | content|no-clip
- border-box: 从border区域向外裁剪背景。
- padding-box: 从padding区域向外裁剪背景。
- content-box: 从content区域向外裁剪背景。
- text: 从文本区域向外裁剪背景。(仅支持webkit内核浏览器)
6、遮罩
- Mask-image
- Mask-position
- Mask-repeat