§ ITPOW >> 文档 >> CSS

有趣的 CSS 3-圆角边框、图片边框

作者:vkvi 来源:ITPOW(原创) 日期:2016-11-12

圆角边框(border-radius)

效果:

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-radiusborder-top-right-radiusborder-bottom-right-radiusborder-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,样式式如下:

borderImage.png

很奇怪吧。再看看 border-image 示例:border-image:url("borderImage.png") 27 27 repeat;(注意 27 不带单位呀)。我们先关注第一个 27,它表示将图片切 4 刀,都是距边缘 27px。

border-image-slice

切成九块后,除中间那块,都拿来对应边框。说那么多无益,看代码:

效果如下:

border-image 效果

border-image 属性也可以细化为:

  • border-image-source:border-image 的第 1 个参数。
  • border-image-slice:border-image 的第 2 个参数。
  • border-image-width:border-image 的第 3 个参数。
  • border-image-outset:border-image 的第 4 个参数,上述代码中省略了。
  • border-image-repeat:border-image 的第 5 个参数。

border-image-width

border-image-width 就是切割下来的图片到底是多宽,我们可以改成与实际不符,比如上面的代码,我们将值由 27 改为 54,其他不变,效果变成这样:

border-image 效果

我们再改为 13,看看效果:

border-image 效果

再看看 border-image-outset

border-image-outset 书面意思是:边框图像区域超出边框的量。头都大了,还好,这个效果没啥意思,不必关注,我给大家看下效果就是了。

效果如下:

border-image 效果

相关文章