绘制圆形
border-XX-XX-radius
1.可以通过 border-XX-XX-radius的方式单独设置某一个角的值
2.border-XX-XX-radius接收两个参数,第一个表示水平方向,第二个垂直方向
3.例如:border-top-left-radius:50%
技巧:在企业开发中推荐使用如下的方式让浮动元素居中
水平居中:left:50%;transform:translateX(-50%);
垂直居中:right:50%;transform:translateY(-50%);
border-image:资源地址 切割模式 填充模式
1.border-image-source:url()--告诉浏览器让哪一张图片成为边框,默认情况下会将图片放到边框的四个顶点,如果设置了边框图片,就不会显示边框颜色。
2.border-image-slice:70 70 70 70;---对指定的边框图片进行切割。
3.border-image-width:10px;指定了宽度,原本的border的宽度就会失效。
4.border-image-repeat:stretch(默认值,拉伸)/repeat(平铺)/round(拉伸+平铺)
verticle-align这是元素的垂直对齐方式
1.默认情况下图片和一行文字的基线对齐(基线就是一行文字中最短那个文字的底部)。
2.text-align是设置给需要对齐元素的父元素,verticle-align是设置给需要对齐的那个元素本身。
3.verticle-align只对行内元素有效。