首页 前端知识 CSS实现图片边框酷炫效果

CSS实现图片边框酷炫效果

2024-08-10 22:08:50 前端知识 前端哥 912 808 我要收藏

一、前言

我们在浏览一些网页时,经常会看到一些好看酷炫的元素边框效果(如下图),那么这些效果是怎么实现的呢?我们知道,一般的边框,要么是实线,要么是虚线(点状,短横线),但是遇到一些特殊的边框,传统边框就束手无策了。
在这里插入图片描述

在这里插入图片描述

遇到这种边框,不妨考虑下用 border-image。border-image属性可以给边框添加背景图片,实现图片边框效果。在css中,可以使用border-image属性设置图片边框,只需要给元素添加border-image样式即可。

二、代码实现

用css代码实现该效果很简单,只需几行css代码即可。

<div class="border-img">
    <h2>梦游天姥吟留别</h2>
    <p>唐 · 李白</p>
    <p>
        海客谈瀛洲,烟涛微茫信难求,越人语天姥,云霞明灭或可睹。
        天姥连天向天横,势拔五岳掩赤城。
        天台四万八千丈,对此欲倒东南倾。
        我欲因之梦吴越,一夜飞度镜湖月。
        湖月照我影,送我至剡溪。
        谢公宿处今尚在,渌水荡漾清猿啼。
        脚著谢公屐,身登青云梯。
        半壁见海日,空中闻天鸡。
        千岩万转路不定,迷花倚石忽已暝。
        熊咆龙吟殷岩泉,栗深林兮惊层巅。
        云青青兮欲雨,水澹澹兮生烟。
        列缺霹雳,丘峦崩摧。
        洞天石扉,訇然中开。
        青冥浩荡不见底,日月照耀金银台。
        霓为衣兮风为马,云之君兮纷纷而来下。
        虎鼓瑟兮鸾回车,仙之人兮列如麻。
        忽魂悸以魄动,恍惊起而长嗟。
        惟觉时之枕席,失向来之烟霞。
        世间行乐亦如此,古来万事东流水。
        别君去兮何时还?且放白鹿青崖间。须行即骑访名山。
        安能摧眉折腰事权贵,使我不得开心颜!
    </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 中的一个高级属性,它允许你使用图像来创建边框,而不仅仅是使用颜色和样式。这个属性提供了比传统边框更多的灵活性和视觉吸引力。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15190.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!