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; 文字水平垂直偏移量和模糊度