CSS3.0总结（1）

属性

---

1.盒子阴影

box-shadow:水平偏移 垂直偏移 模糊程度 模糊大小 颜色 inset（盒子内）

ps：这里注意水平偏移和垂直偏移可以给负数，其他属性值不可以。

2、文本阴影

text-shadow:水平偏移 垂直偏移 模糊程度 颜色

ps：这里注意文本阴影不可以设置模糊大小，如果设置了模糊大小文本阴影会失效。

3.边框圆滑度属性

box-radius:数值px/数值%

ps：属性值给一个值表示四个角，两个值表示对角，三个值表示，上 对角 下，四个值表示四个角；

这里注意input的圆滑度常取本身高度的一半，起到更圆滑的效果；

正圆形：数值设为100%/50%

4、背景属性

背景图大小background-size:宽度 高度/cover/contain

复合写法background:url() no-repeat 0 0/cover

cover:背景图不断增大，直到完全充满整个容器才会停止，可能图片显示不全，因为超出盒子部分会被裁取；

contain:背景图不断增大，碰到某个边缘就会停止，可能出现显示不全留白

---

5.渐变属性

background-image:linear-gradient(方向，颜色，颜色，颜色)

ps：如果加浏览器前缀的话要加在linear之前

注意属性值写（red 50%，blue 60%）表示的是0-50%是红色，50%-60%是渐变色，60%-100%是蓝色

重复性渐变background-image:repeating-linear-gradient(颜色 px,颜色px)

ps：不常用

径向渐变background-image:radial-gradient()

重复性径向渐变background-image:repeating-radial-gradient()

ps:不常用

---

6、透明属性

rgba(0-255,0-255,0-255,0-1)1表示不透明

opacity(0-1)1表示不透明

区别：

rgba只透明背景,opacity透明背景和内容;

opacity在ie8及以下的支持方式：filter:alpha(opacity=value);value=(1-100)

ps：意味着可以使用opacity进行元素隐藏，隐藏后占位置，可以配合过渡属性做特效

---

7.怪异盒模型属性

box-sizing:border-content:默认，标准（w3c盒模型）：width+两边padding+两边border+两边margin=总宽

box-sizing:border-box：怪异盒（ie盒模型）：widh+两边margin=总宽；

应用：

给盒子加了padding后不用再减去增加的值，可以直接使用怪异盒；

解决元素在浏览器缩小后被挤掉下来，影响布局的问题，原因是边框不会等比缩放，直接使用怪异盒即可

ps：怪异盒在IE678不用添加文档申明也可以触发，所以也叫ie盒模型

---

8、变形属性

注意：xyz轴分别向右向下有前为正

（1）变形位移transform:translateX/Y/Z(数值px/数值%)

x.y都位移transoform:translateX() translateY() / transform:translate(数值px,数值px)

xyz都位移transform:translate3d(px,px,px)

ps:注意变形位移参考自身原有位置，并且位移后原位置仍然存在！除非给定位脱落文档流；

使用定位+变形位移使元素水平垂直居中的方法：元素给定位；top：50%；

left：50%；transform:translate(-50%,-50%)解决了不用再计算高宽的一半的烦恼

---

（2）变形旋转transform:rotatex/y/z(角度deg)

注意tansform:rotate（）表示的是z轴旋转

XYZ都旋转：transform：rotate3d(a,b,c,d)abc是0或1，0表示不旋转，d是角度deg

变形原点：transform-origin:水平位置（px） 垂直位置（px）

景深（加在父元素身上）perspective:数值px  远小近大

形成3d空间（加在父元素身上）transform-style:flat/perserve-3d

---

(3)倾斜属性

transform:skewX/Y(角度deg)

ps：不常用

---

（4）变形缩放属性

transform:scaleX/Y/Z(数值)0表示消失 1表示正常 大于1表示放大

transform:scale(数值，数值)表示x和y的缩放

transform:scale3d(数值，数值，数值)xyz都缩放

---

未完待续