详见个人博客
1、css四角背景无边边框
代码如下：
<div class="BoxWrap">
<div class="horn"></div>
</div>
.horn{
width: 1000px;
height: 500px;
margin: 100px;
background: linear-gradient(#00faff, #00faff) left top,
linear-gradient(#00faff, #00faff) left top,
linear-gradient(#00faff, #00faff) right top,
linear-gradient(#00faff, #00faff) right top,
linear-gradient(#00faff, #00faff) left bottom,
linear-gradient(#00faff, #00faff) left bottom,
linear-gradient(#00faff, #00faff) right bottom,
linear-gradient(#00faff, #00faff) right bottom;
background-repeat: no-repeat;
background-size: 5px 20px, 20px 5px;
}
2、css四角蓝色边框，科技蓝
代码如下：
<div class="BoxWrap">
<div class="horn">
//四个div分别为四个角上的div
<div class="lt"></div>
<div class="rt"></div>
<div class="rb"></div>
<div class="lb"></div>
</div>
.BoxWrap{
width: 1000px;
height: 500px;
position: relative;
}
.horn{
position: absolute;
width: 100%;
height: 100%;
border:1px solid #00d3e7;
margin: 100px;
}
.horn>div{
width: 10px;
height: 10px;
position:absolute;
}
.horn .lt{
border-top: 3px solid #00d3e7;
border-left: 3px solid #00d3e7;
left: -3px;
top: -3px;
}
.horn .rt{
border-top: 3px solid #00d3e7;
border-right: 3px solid #00d3e7;
right: -3px;
top: -3px;
}
.horn .rb{
border-bottom:3px solid #00d3e7;
border-right: 3px solid #00d3e7;
right: -3px;
bottom: -3px;
}
.horn .lb{
border-bottom:3px solid #00d3e7;
border-left: 3px solid #00d3e7;
left: -3px;
bottom: -3px;
}
3、css实现四角边框，四角为正方形，颜色渐变
代码如下：
<div class="BoxWrap">
<div class="horn">
<div class="lt"></div>
<div class="rt"></div>
<div class="rb"></div>
<div class="lb"></div>
</div>
.BoxWrap {
width: 1000px;
height: 500px;
position: relative;
}
.horn {
position: absolute;
width: 100%;
height: 100%;
border: 1.5px solid #00d3e7;
margin: 100px;
border-image: -webkit-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
border-image: -moz-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
border-image: -o-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
border-image: linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
}
.horn>div {
width: 10px;
height: 10px;
position: absolute;
/* background-color: #00d3e7 */
}
.horn .lt {
left: -10px;
top: -10px;
background-color: rgb(85, 87, 231);
}
.horn .rt {
right: -10px;
top: -10px;
background-color: rgb(85, 87, 231);
}
.horn .rb {
right: -10px;
bottom: -10px;
background-color: rgb(149, 228, 241);
}
.horn .lb {
left: -10px;
bottom: -10px;
background-color: rgb(149, 228, 241);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<style>
</style>
</head>
<body>
<div class="BoxWrap">
//边框div
<div class="horn">
//四个角上正方形div
<div class="lt"></div>
<div class="rt"></div>
<div class="rb"></div>
<div class="lb"></div>
</div>
</div>
</body>
</html>
4、css无角渐变边框
代码如下：
<div class="boxWrap"></div>
.boxWrap {
width: 1000px;
height: 500px;
margin: 100px;
background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 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%;
}
