概述
利用CSS中linear制作复杂的边框效果
网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：
XML/HTML Code复制内容到剪贴板
html>
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
}
.first:before {
background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
background-image: linear-gradient(0deg, orange, red);
}
.third:before {
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
最后
以上就是酷炫长颈鹿为你收集整理的html制作边框效果,CSS_利用CSS中linear制作复杂的边框效果，网上看到一种利用linear-gradient - phpStudy...的全部内容，希望文章能够帮你解决html制作边框效果,CSS_利用CSS中linear制作复杂的边框效果，网上看到一种利用linear-gradient - phpStudy...所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![[算法] - insert interval Vector模板类的应用](/uploads/reation/bcimg2.png)
发表评论 取消回复