Css 制作div四角边框效果

最新推荐文章于 2024-11-14 13:53:54 发布

原创最新推荐文章于 2024-11-14 13:53:54 发布 · 939 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #前端

文章介绍了如何通过CSS的linear-gradient属性为echarts的外部div创建四角小边框，提供了具体的CSS代码示例，包括不同方向的渐变和背景大小设置，作为替代UI切图的方法。

在echarts的外部div中添加四角小边框，还是找ui切图快。。。

 .box{
    background: linear-gradient(to left, rgb(56, 3, 250), rgb(56, 3, 250)) left top no-repeat,
        // 从右往左的渐变，颜色1到颜色2,,,位置是左上不重复，一根。以下同理
        linear-gradient(to bottom, rgb(56, 3, 250), rgb(56, 3, 250)) left top no-repeat,
        linear-gradient(to left, rgb(56, 3, 250), rgb(56, 3, 250)) right top no-repeat,
        linear-gradient(to bottom, rgb(56, 3, 250), rgb(56, 3, 250)) right top no-repeat,
        linear-gradient(to left, rgb(56, 3, 250), rgb(56, 3, 250)) left bottom no-repeat,
        linear-gradient(to bottom, rgb(56, 3, 250), rgb(56, 3, 250)) left bottom no-repeat,
        linear-gradient(to left, rgb(56, 3, 250), rgb(56, 3, 250)) right bottom no-repeat,
        linear-gradient(to left, rgb(56, 3, 250), rgb(56, 3, 250)) right bottom no-repeat;
      background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}

linear-gradient参数说明如下：

括号内参数：to bottom/left/right/top表示渐变色的方向和颜色可以为同一种颜色；

linear-gradient函数后面的left top表示分布在左上方。

background-size: 18px 18px表示每个小框的长度和宽度，

在linear-后面要添加no-repeat表示只显示一遍，不然会一直重复: