首页 > 开发 > CSS > 正文

css3常用属性css3常用属性

2016-05-18 19:10:06  来源:慕课网
  1.圆角效果:border-radius:5px 5px 3px 2px;
注:共四个值设置四条边,遵循顺时针方向原理。
2.阴影效果:box-shadow:2px 2px 3px 4px #000 inset;
注:第一个值是X轴偏移量 第二个是Y轴偏移量 第三个是模糊半径,第四个是阴影长度。
3:边框图片:border-image:
4:颜色透明:background-color:rgba(220,211,32,0.5)。
5:颜色渐变:background-image:linear-gradient(to bottom,red);
注:这里是background-image,不是background-color,值中to是到哪边结束。
6:text-overflow,文字超出之后两个值,clip 表示剪切,ellipsis表示显示省略号。
7:word-wrap:文字超出两个值,normal表示换行,break-word表示单词或URL内部换行。
8:white-space:文字一行显示,不换行,值 normal
9:@font-face:字体引用。font-family:字体名称 src:字体在服务器路径
10:text-shadow:文字阴影。
注意和边框阴影box-shadow区别。只有四个值,text-shadow:0 1px 1px #fff 第一第二是X Y 偏移,三个值是模糊程度。
11:background-origin:设置背景图片平铺的点。三个值,border-box表示从边框0,0开始,padding-box表示从padding设置的0,0点开始,content-box表示从内容开始。

12:background-clip:裁剪背景图片。参数和background-origin一样,表示从什么地方开始裁剪。
13:background-size:背景填充整个div 。
14:一个div中设置多个背景,
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;