css3的新属性
1.css的标准阴影
li:nth-child(1) shadow{
box-shadow :2px 2px 5px green;
------------------------ 距离左边 距离顶边 模糊度 阴影颜色----------
-2px -2px 5px 10px green;
---------------------------距离右边 距离底边 模糊度 阴影扩展值四条边都会增加-------------
}
内阴影:
li:nth-child(2) shadow{
box-shadow:inset 2px 2px 5px green;
}
2.文本阴影及一些文本样式;
p{
text-shadow:2px 2px 6px black;
距离左边的偏移 距离右边偏移 阴影模糊度 阴影颜色;
word-break:break-all;整体打 断;
word-wrap:break-word;文字打断;
white-space:pre;-------空白换行,会被保留;
pre-line;------------------换个行被保留,但是行内空格不保留;
pre-wrap-----------------空白换行都会被保留,与pre相似;
no wrap------------- -----单行文本显示,所有文本都在一行显示,空格与换行都 不会保留
颜色渐变:
线性-渐变
background-image:linear-gradient(red,green,blue);
background-image:linear-gradient(0deg,red,orange);
----水平----
--------------90deg 垂直的 45deg/135deg倾斜的-------------
background-image:linear-gradient(to right,yellow)
过渡属性: .one{
transition-property:width,height;--------------要过渡的属性取值;
transition-duration:1s
transiton:all 1s;
}
.one {
transition-delay:1s;-------推迟一秒再过渡;
transution:width 1s------给宽设置的宽度一秒过渡;
opacity:0----------透明度0-1;
}
.one{
transition-timing-function:linear;---------------线性效果,匀速;
ease;---------------淡入浅出;
ease-in;-----------------淡入
ease-out ---------------淡出;
ease-in-out;---------------淡入淡出;