边框
border
定义元素边框的外观特性
1 border:<line-width> || <line-style> || <color>
border-width
定义元素的边框厚度
1 border-width:top right bottom left
border-style
定义元素的边框样式
1 | //可用取值 |
border-color
定义元素的边框颜色
border-shadow
定义元素的阴影
1 | //可用取值 |
结合伪类实现阴影
border-radius
定义元素的阴影
1 | border-radius:<length> | <percentage> |
border-image
定义将图像应用到元素的边框上
1 | border-image-source: |
背景
background
定义元素的背景特性
- 一个元素可以设置多组背景图像,每组属性间使用逗号分隔。(背景色background-color不能设置多组,背景色通常都定义在最后一组上)
- 如果设置的多组背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
background-color
定义元素使用的背景颜色
- 背景图像会覆盖在背景颜色。
1 | background-color:transparent; //设置背景色透明 |
background-image
定义元素使用的背景图像
1 | 渐变属性:inear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient |
linear-gradient
1 | 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: |
background-repeat
定义元素的背景图像如何填充。
1 | repeat-x:背景图像在横向上平铺 |
background-attachment
定义滚动时背景图像相对于谁固定
1 | fixed:背景图像相对于视口(viewport)固定。 |
background-position
指定背景图像在元素中出现的位置
1 | <percentage>:用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。 |
- 雪碧图 https://www.toptal.com/developers/css/sprite-generator
- .icon2{background-position: -40px -40;}
background-origin
指定的背景图像计算background-position时的参考原点(位置)
1 | border-box从border区域(含border)开始显示背景图像。 |
background-clip
指定对象的背景图像向外裁剪的区域
1 | border-box:从border区域(含border)开始向外裁剪背景。 |
- 文字遮罩 http://demo.doyoe.com/css3/background-clip/mask-text2.htm
background-size
定义背景图像的尺寸大小
1 | <length>:用长度值指定背景图像大小。不允许负值。 |