css四种炫酷科技背景边框，颜⾊渐变，四⾓特效详见
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;
}
qq
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;
css特效文字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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。