CSS实现图片边框酷炫效果

七夏发表于 2024-12-30 17:19:12

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

页: [1]

3BBS's Archiver

CSS实现图片边框酷炫效果