本文主要是介绍Css 制作div四角边框效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在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表示只显示一遍，不然会一直重复:
这篇关于Css 制作div四角边框效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
