CSS3

阴影

　　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，容纳

　　多重背景之间只需要用逗号隔开就可以　慕课

1. 用逗号隔开每组 background 的缩写值；
2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4. background-color 只能设置一个。
5. background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat  right bottom / 75% 55%,

 

 

　　  

 

更多专业前端知识，请上 【猿2048】www.mk2048.com