css扩展

1.background-radius 背景切脚

切圆角 将边框从直角转换为圆角

格式：border-radius: 左上 右上 右下 左下 若省写则是对角的取值

连写：border-radius: 100px 100px 100px 100px/50px 50px 50px 50px; 或 border-radius：100px/50px;

画椭圆：必须是长方体 设置参数  border-radius：width * 0.5px/height * 0.5px；

画内圆 ：radius > border -width 圆角的值要大于变宽的值

border-radius：with * 0.5 ，取值大于宽度的一半则默认为宽度一半 ，边框的值决定内圆的大小，值越小 内圆就越大 。

画内边行：radius < border -width 圆角值小于边框值  边框的决定内变行的大小，值越小，内变形越大。

2. border-image 边框图片

border-image-source: url("xxx.jpg"); 指定图片

border-image-slice: 70 70 70 70;  将边框图片切割为九宫格

border-image-width: 70px;边框图片的宽度 优先级比直接给border添加要大

border-image-repeat:repeat; 边框图片向外移动的距离

连写：border-image: url("xxx.jpg") 60 60 60 60  repeat;

3.vertical-aline 属性 垂直方式：

vertical-align: baseline; 基线 默认值（与文字元素局域最底部对齐）

vertical-align: bottom; 元素和父元素的底部对齐

vertical-align: text-bottom让 元素和文字的底部对齐

vertical-align: text-top  让元素和文字的顶部对齐

vertical-align: top  让元素和父元素的顶部对齐

vertical-align: middle; 让元素和文字的中线对齐

4.渐变

五大浏览器厂商,但是只有四个浏览器内核, 所以也只有四个私有前缀

-webkit-transition: 谷歌/苹果

-moz-transition: 火狐

-ms-transition: 微软

-o-transition: 欧朋

5.形变中心点 transition-origin

默认是形变重点点是50% 50%, 宽高的一半

格式: transform-origin: 水平方向 垂直方向;

取值：像素 ，百分百，left right center bottom top。

只会影响旋转和缩放, 但是不会影响平移以及倾斜。

7.透视：

添加到父控件

远小近大perspective: 0px; 控制像素即可

8.投影

盒子投影：box-shadow: 10px 10px 10px;  盒子水平垂直偏移量和模糊度

文字投影：text-shadow: 10px 10px 10px; 文字水平垂直偏移量和模糊度