|
前缀 |
浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
阴影
box-shadow:X轴偏移量，Y轴偏移量， 模糊距离，阴影宽度，inset为内部阴影，忽略为外部阴影；
如果需要添加多个阴影，只需要用逗号隔开
.box_shadow{
box-shadow:
4px 2px 6px #f00,
-4px -2px 6px #000,
0px 0px 12px 5px #33CC00 inset;
}
边框图片
border-image:url(images/图片.png) 宽度 repeat；
repeat 重复，round 平铺，stretch 拉伸；
渐变
颜色渐变分为线性渐变(linear)和径向渐变(radial);
background-image:linear-gradient(to left, red, blue);
第一个参数可以直接是方向，也可以是0deg到360deg；
颜色的过度为第一个到最后一个，中间可以填写多个颜色。
文字
文字过多时用：text-overflow:ellipsis;
clip 剪切 ellipsis 省略号
强制为一行 white-space:nowrap;
超出隐藏 overflow:hidden;
word-wrap:break-word; 文字超过一定长度自动换行；
text-shadow 文字阴影
语法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色
背景
背景图片原始位置 background-origin
background-origin:border-box;
border,padding,content;
如果背景不是no-repeat时，则没有效果；
背景剪切 background-clip：border-box;
no-clip:不剪切
背景大小 background-size:auto;
auto为默认值，可以为px和百分比；
cover，覆盖 contain，容纳
多重背景之间只需要用逗号隔开就可以 慕课
- 用逗号隔开每组 background 的缩写值；
- 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
- 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
- background-color 只能设置一个。
- background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 75% 55%,
