这是我参与8月更文挑战的第12天，活动详情查看： 8月更文挑战
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
最近看到一个需求，用纯css实现div框四个角的点缀，然后自己手写了下整理了代码分享一下，（当然这种需求你也可以完全用ui设计图）这里主要运用了css3属性linear-gradient
linear-gradient() 定义与用法
函数用于创建一个表示两种或多种颜色线性渐变的图片。 创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
css语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
具体了解linear-gradient属性可以去看官网学习：www.runoob.com/cssref/func…
用纯css实现div框四个角的点缀
方案一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.border {
margin: 300px auto;
width: 200px;
height: 100px;
background: linear-gradient(blue, blue) left top,
linear-gradient(blue, blue) left top,
linear-gradient(blue, blue) right top,
linear-gradient(blue, blue) right top,
linear-gradient(blue, blue) left bottom,
linear-gradient(blue, blue) left bottom,
linear-gradient(blue, blue) right bottom,
linear-gradient(blue, blue) right bottom;
background-repeat: no-repeat;
background-size: 1px 24px, 24px 1px;
}
</style>
<body>
<div class="border"></div>
</body>
</html>
方案一效果图：
方案二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.el_card {
width: 400px;
height: 200px;
margin: 300px auto;
background: radial-gradient(circle at center center, rgba(23, 48, 78, 1), rgba(20, 37, 63, 1)),
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) left top,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) left top,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) right top,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) right top,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) left bottom,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) left bottom,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) right bottom,
linear-gradient(rgba(13, 142, 228, 0.62), rgba(9, 148, 240, 0.62)) right bottom,
linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
background-repeat: no-repeat;
background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;
}
</style>
<body>
<div class="el_card"></div>
</body>
</html>
方案二效果图：
具体效果可以直接复制代码到本地看，样式颜色可以微调成自己想要的💕💕~ 欢迎阅读点赞⭐️⭐️⭐️
