圆角边框(border-radius)
效果:
讲解:
border-radius 如果只有 1 个属性值,则表示 4 个角都用这个值。
border-radius 如果只有 2 个属性值,则表示左上、右下用第 1 个值,右上、左下用第 2 个值。
border-radius 如果只有 3 个属性值,则表示左上用第 1 个值,右上用第 2 个值,右下用第 3 个值,左下用的是第 2 个值(注意不是第 3 个)。
border-radius 如果有 4 个属性值,则表示左上用第 1 个值,右上用第 2 个值,右下用第 3 个值,左下用第 4 个值。
如果用 em,则不受宽、高比例影响;如果用 px,同样不受宽高比例影响;如果用 %,则会因宽、高比例不同其圆角幅度、圆心位置也不同。
我们还可以用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 为某个角单独指定圆角。此时我们可以指定两个属性值,两个属性值之间用空格隔开,比如:border-top-left-radius:20px 5px;,这个效果有点像上图中第二幅图,可以看出 X 方向的边框拿出 20px 来变成弧形(实际可能不会刚刚 20px),Y 方向的边框拿出 5px 来变成弧形(实际可能不会刚刚 5px)。
高级讲解:
border-radius:10px/30px; 注意这里有个 /,不是空格,这是啥意思呢?前面不是说的可以指定圆角的 X 方向长度和 Y 方向长度么?这个就是指 4 个角的 X 方向都是 10px,4 个角的 Y 方向都是 30px。
还可以这样用:border-radius:10px 30px 50px 70px/10px 30px 50px 70px; 第 1 个角用 10px 和 10px,第 2 个角用 30px 和 30px……
图片边框(border-image)
图片边框属性为 border-image,但并不是像 background-image 那么简单。
我们先准备一张图,叫 borderImage.png,尺寸为 81x81,样式式如下:
很奇怪吧。再看看 border-image 示例:border-image:url("borderImage.png") 27 27 repeat;(注意 27 不带单位呀)。我们先关注第一个 27,它表示将图片切 4 刀,都是距边缘 27px。
切成九块后,除中间那块,都拿来对应边框。说那么多无益,看代码:
效果如下:
border-image 属性也可以细化为:
border-image-width
border-image-width 就是切割下来的图片到底是多宽,我们可以改成与实际不符,比如上面的代码,我们将值由 27 改为 54,其他不变,效果变成这样:
我们再改为 13,看看效果:
再看看 border-image-outset
border-image-outset 书面意思是:边框图像区域超出边框的量。头都大了,还好,这个效果没啥意思,不必关注,我给大家看下效果就是了。
效果如下: