vue.js border

2024-07-16 06:50| 来源: 网络整理| 查看: 265

首先我们今天的需求是用border-image做一个边框渐变色！！！那我们先来介绍一下什么是border-image和linear-gradient border-image是指定作为div元素周围边框的图像，那么它有几个参数，我们该怎么正确使用它呢？ border-image有五个参数分别是：在这里插入图片描述我们最常用的就是border-image-source和border-image-slice还有border-image-repeat，接下来就是linear-gradient() 函数用于创建一个线性渐变的 “图像”，它的语法是： ![在这里插入图片描述](https://img-blog.csdnimg.cn/22d1c12c60a1416a818d63c001694160.png)它的参数有具体不懂的可以私我或者自己去查询：

所以我们边框有了渐变色也有了接下来只要把它们结合起来不就好了吗？

export default {}; .home { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; h2 { position: sticky; top: 0px; background-color: rebeccapurple; } .box { margin: 0 auto; width: 200px; height: 200px; border: 10px solid #ddd; // 重点在这里哦后面的30 30 就是border-image-slice这个参数具体不明白的可以多查阅多方资料 border-image: linear-gradient(rgb(0, 255, 98), yellow) 30 30; } }

我们来看看效果：在这里插入图片描述完美实现哦！每天Get一个小需求，今后就不怕用户叭叭了！

【本文地址】

公司简介

联系我们