那些好看的边框

2020-08-14 05:27 评论0

  授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!

  授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。

  版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。

  在盒子模型中边框作为隔离margin和padding的分界点,是围绕元素内容和内边据的一条或多条线。虽然在网页设计中边框不可或缺,但是它像是一个傲娇鬼,你不去设置,它就不会出现。

  这样一个内圆角当然可以通过两个div嵌套来实现,但是利用一个div也能实现如此效果。由于outline(轮廓)属性可以随着圆角边,而box-shadow则能随着外直角边渲染,则可以得到内圆角的效果。

  如图,border-image-slice可以设置各部分对图片切割的大小。 让我们用这种方法来做一个边框。

  最后,让我们看一下CSS中最新的(和复杂的)操作,用于操作边界—— border-image。这里的想法是,有时创建复杂的用户界面特性需要一个复杂的界面设计,而不仅仅是一个纯色。这可能是通过在另一个较大的元素的顶部覆盖一个元素,然后将背景图像应用到底部元素,伪造一个复杂的边界来创建的。或者在极端情况下,甚至可能需要创建一个包含9个元素的3 x 3网格,其中的中心元素作为您的内容,以及周围的8个元素,将边界元素应用于它们。

  这些角的图像会被插入到你的边界的角落里,而顶部、右边、底部和左边的部分将被用来填充你的边界的相应边(通过拉伸或重复)。我们需要告诉浏览器让这些片的大小正确——例如,这个图像是160px,还有一个4 x 4的网格,所以每个片都需要40px。

  首先,我们需要一个盒子来应用边界。这需要指定一个边界,否则边界图像将没有显示的空间。我们还将使用background-clip,使任何背景色只填充内容和内边距的区域,并且不扩展到边界。

  接下来,我们将使用 border-image-source指定要使用的源图像作为边界图像。 它的工作原理和background-image一样,能够接受一个url()函数或一个渐变作为一个值。

  如果所有的片都是相同的大小,那么这个属性可以取一个值,如果需要不同的大小,则可以使用多个值:

  如果图像是光栅图形(像 .png 或 .jpg),就用像素来解释这个数字。如果图像是矢量图形(比如,.svg),那么这个数字将被解释为图形中的坐标。也可以使用百分比(使用单位 %)。

  注意:默认情况下,第9部分的中间部分被完全省略,而元素内容出现在剩下的空白中。如果想要的是边界图像的中心,可以通过在border-image-source的末尾包含关键字fill,在这种情况下,它将扩展到适合背景区域。

  最后,我们将使用border-image-repeat t来指定我们希望图像如何填充边界。选项是:

  stretch:默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化,所以不推荐。 repeat:边图像被重复,直到边界被填满。根据具体情况,这可能看起来不错,但可能会看到一些难看的图像片段。 round: 边的图像被重复,直到边界被填满,它们都被稍微拉伸,这样就不会出现碎片。 space:边图像被重复,直到边界被填满,每个拷贝之间添加了少量的间隔,这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。

  有趣的是,你可能已经注意到,边界设置为20px宽,而图像的宽度为40——在这种情况下,浏览器只调整大小为20px宽,这样就可以了。

网友评论

全部评论
暂无评论