凡科建站的怎么取消手机网站,西部数码上传网站,wordpress 产品图片,长沙o2o网站制作公司一、前言
我们在浏览一些网页时#xff0c;经常会看到一些好看酷炫的元素边框效果#xff08;如下图#xff09;#xff0c;那么这些效果是怎么实现的呢#xff1f;我们知道#xff0c;一般的边框#xff0c;要么是实线#xff0c;要么是虚线#xff08;点状#xf…一、前言
我们在浏览一些网页时经常会看到一些好看酷炫的元素边框效果如下图那么这些效果是怎么实现的呢我们知道一般的边框要么是实线要么是虚线点状短横线但是遇到一些特殊的边框传统边框就束手无策了。 遇到这种边框不妨考虑下用 border-image。border-image属性可以给边框添加背景图片实现图片边框效果。在css中可以使用border-image属性设置图片边框只需要给元素添加border-image样式即可。
二、代码实现
用css代码实现该效果很简单只需几行css代码即可。
div classborder-imgh2梦游天姥吟留别/h2p唐 · 李白/pp海客谈瀛洲烟涛微茫信难求越人语天姥云霞明灭或可睹。天姥连天向天横势拔五岳掩赤城。天台四万八千丈对此欲倒东南倾。我欲因之梦吴越一夜飞度镜湖月。湖月照我影送我至剡溪。谢公宿处今尚在渌水荡漾清猿啼。脚著谢公屐身登青云梯。半壁见海日空中闻天鸡。千岩万转路不定迷花倚石忽已暝。熊咆龙吟殷岩泉栗深林兮惊层巅。云青青兮欲雨水澹澹兮生烟。列缺霹雳丘峦崩摧。洞天石扉訇然中开。青冥浩荡不见底日月照耀金银台。霓为衣兮风为马云之君兮纷纷而来下。虎鼓瑟兮鸾回车仙之人兮列如麻。忽魂悸以魄动恍惊起而长嗟。惟觉时之枕席失向来之烟霞。世间行乐亦如此古来万事东流水。别君去兮何时还且放白鹿青崖间。须行即骑访名山。安能摧眉折腰事权贵使我不得开心颜/p
/div重点代码来了
.border-img {text-align: center;padding: 3rem;margin: 2rem auto;width: 60%;border: 70px solid #fff;border-image: url(./img/border.png) 70 round;
}上面的代码可以看出只需要给元素添加border-image样式即可。那么下面就重点来介绍一个border-image属性的用法
三、border-image属性
border-image 属性是一个简写属性它由 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 五个属性组成。下面详细介绍一下这个几个属性的作用。
3.1、border-image-source border-image-source属性指定要使用的图像地址而不是由border-style属性设置的边框样式。
div {border-image-source: url(border.png);
}默认值为none。如果值是none或者如果无法显示图像边框样式会被使用。
3.2、border-image-slice border-image-slice 属性将使用 border-image-source 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。
border-image-slice: number | % | fill;number表示到图像边缘的偏移量在位图中的单位为像素点在矢量图中则是坐标。对于矢量图number 值与元素大小相关而非矢量图的原始大小。因此使用矢量图时使用百分比值%更可取。
%以原始图像大小的百分比表示的边缘偏移量水平偏移使用图像的宽度垂直偏移则使用图像的高度。
fill保留图像的中心区域并将其作为背景图像显示出来但其会堆叠在 background 之上。它的宽度和高度分别对应顶部和左侧图像切片的宽度和高度。
切分过程会将图像分割为 9 个区域四个角、四个边edges以及中心区域。四条切片线从它们各自的侧面设置给定距离控制区域的大小。 区域 1-4 为角区域corner region。每一个都被用于组成最终边框图像的四个角。区域 5-8 边区域edge region。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。区域 9 为中心区域middle region。它在默认情况下会被丢弃但如果设置了关键字 fill则会将其用作元素的背景图像。
以如下原始图为例图像中钻石是长宽分别为 30px 3.3、border-image-width border-image-width 指定了边界图像的宽度。如果本属性值大于元素的 border-width边界图像将会向 padding 边缘延展。
border-image-width: [ length | percentage | number | auto ]{1,4}border-image-width 参数的四种类型:
length带 px, em, in … 单位的尺寸值。
percentage百分比。
number不带单位的数字它表示 border-width 的倍数。
auto使用 auto border-image-width 将会使用 border-image-slice 的值。
border-image-width 的参数不能为负值。
border-image-width 属性的值可用以下方式进行设定
当指定 一个 值时它将作用到 四个方向
当指定 两个 值时它将分别作用到 垂直方向 和 水平方向
当指定 三个 值时它将分别作用到 上方、水平方向、和下方
当指定 四个 值时它将分别作用到 上方、右方、下方和左方。
3.4、border-image-outset border-image-outset 属性定义边框图像可超出边框盒的大小使图像边框延伸到盒子模型以外的距离。
border-image-outset[ length | number ]{1,4}length用具体的数值加单位的形式指定图像边框向外偏移的距离不允许为负值
number用浮点数指定图像边框向外偏移的距离该值表示 border-width 的倍数例如值为 2则表示偏移量为 2 * border-width不允许为负值。
border-image-outset 属性的值可用以下方式进行设定
当指定 一个 值时它将作用到 四个方向
当指定 两个 值时它将分别作用到 垂直方向 和 水平方向
当指定 三个 值时它将分别作用到 上方、水平方向、和下方
当指定 四个 值时它将分别作用到 上方、右方、下方和左方。 3.5、border-image-repeat border-image-repeat 属性用来设置如何填充使用 border-image-slice 属性分割的图像边框例如平铺、拉伸等等。
border-image-repeat: [ stretch | repeat | round | space ]{1,2} stretch拉伸图片以填充边框。
repeat平铺图片以填充边框。
round平铺图像。当不能整数次平铺时根据情况放大或缩小图像。
space平铺图像。当不能整数次平铺时会用空白间隙填充在图像周围不会放大或缩小图像。
border-image-repeat 属性接受 1~2 个参数值
如果提供两个参数那么第一个参数将用于水平方向第二个将用于垂直方向
如果只提供一个参数那么将在水平和垂直方向都应用该值。
演示图如下 round 与 repeat 的区别round会凑整填充进行了适度的缩放。repeat不凑整不进行缩放。
round 与 space 的区别虽然都是凑整填充显示但是space不能凑整时不进行缩放而是用空白间隙填充在图像周围。
四、总结
大多数现代浏览器都支持 border-image 属性但旧版浏览器可能不支持或支持有限。border-image属性兼容性如下 注意事项
如果没有设置 border-image-source则其他 border-image 属性将无效。
如果图像无法加载或图像源为空则边框将不会显示。
为了看到 border-image 的效果通常需要先设置一个透明的边框宽度。
border-image 不会继承但可以通过 CSS 继承规则从父元素继承其他边框属性如 border-width、border-style 和 border-color。
border-image 不会影响 border-radius但 border-radius 可能会影响 border-image 的外观。
border-image 是 CSS 中的一个高级属性它允许你使用图像来创建边框而不仅仅是使用颜色和样式。这个属性提供了比传统边框更多的灵活性和视觉吸引力。
