css3各种属性的总结

css3总结

1：css3属性具有兼容性，不兼容IE9以下浏览器，IE9部分兼容。

2：各大浏览器的内核兼容写法？

内核是浏览器的核心，作用是渲染页面
IE -ms-
火狐 -moz-
欧朋 -o-
谷歌 -webkit-
3:css3属性和标签更主要是用在移动端

4：文字阴影

text-shadow：x y blur color, …

参数
x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

文本阴影如果加很多层，会很卡很卡很卡

例子：

层叠：
color:red;

font-size:100px;

font-weight:bold;

text-shadow:2px 2px 0px white, 4px 4px 0px red;

光晕：
color:white;

font-size:100px;

text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de,

0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font-family:Verdana, Geneva, sans-serif;
font-size:100px;
font- weight:bold; color:white;

5：文字描边

webkit-text-stroke:宽度 颜色

6:文字排列
direction 定义文字排列方式(全兼容)
rtl 从右向左排列
ltr 从左向右排列
注意要配合unicode-bidi:bidi-override; 一块使用

7：省略号

text-overflow 定义省略文本的处理方式

clip 无省略号

ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

举例：*-*1111

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

8: 背景阴影：

box-shadow:x y 模糊度（可选） 颜色;
box-shadow: 20px 20px 20px yellow, 30px 30px 30px green;

9:背景渐变：

分为2种：
普通渐变 linear

径向渐变 radial

background:-webkit-linear-gradient(top,yellow,blue);

background:-webkit-linear-gradient(left,yellow,blue,green,pink);

background:-webkit-linear-gradient(top right,yellow,blue,green,pink);

background:-webkit-linear-gradient(top right,yellow 50%,blue 20%,green 30%,pink);

background:-webkit-linear-gradient(top,yellow 200px,blue 100px,);

background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));

background: -webkit-radial-gradient(50%,yellow, red,blue,pink,green);

10：transform:变换/变形

下面的属性值分别有：x y z 3个轴

translate:移动
translate(X px,Y px);

rotate:旋转/负值就是倒转;
rotate(-360deg);

scale:缩放
scale(x,y)

skew:扭曲
skew(x deg,y deg)

11：transition:过渡

过渡时间

transition-duration: 3s;

过渡属性(定义宽还是高)

transition-property: all;

过渡函数(运动的方式)

transition-timing-function: ease;

过渡延迟时间

transition-delay: 4s;

12：动画属性

animation

animation-name:动画的名字

animation-duration:动画完成一个周期所花费的时间(秒/毫秒)

animation-timing-function:动画的速度曲线

(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)

animation-delay:动画何时开始·**

animation-iteration-count:动画被播放的次数 number/infinite(无限循环)

animation-direction:动画是否在下一周期逆向的播放 normsl/alternate(反向播放)

animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放)

animation-fill-mode:动画时间之外的状态

规定动画
@keyframes name{

from{ }
to{ }
}

13：transform-origin:基点

定义x轴的写法 :left / center / right / length / %

定义Y轴的写法 :top / center / bottom / 20px /50 %

transform-origin : x y ;

14：等价写法

transform: translate3d(30px,30px,800px)

transform:translateZ(800px) translateX(30px) translateY(30px);

transform:translateZ(800px) translate(30px,30px);

15:景深

transform-style: 把2D转换成3D/ preserve-3d;

perspective: 像素px;

perspective 属性定义 3D 元素视图的距离，以像素计。

当元素定义 perspective 属性时，其子元素会获得透视效果

perspective翻译过来叫 景深