创建边界线性梯度
创建边界线性梯度
提问于 2020-10-15 19:28:56
我需要像在图片上那样用线性梯度创建这样的边框。
我产生这样的线性梯度
background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;现在如何将其应用于div块？
具有此梯度的边界图像源给出了错误的结果。
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-10-15 19:40:20
可以在子div上使用背景：
.custom-border {
background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;
padding: 10px;
}
.custom-border>div {
background: #fffdee;
padding: 5px;
}<div class="custom-border">
<div>test</div>
</div>
Stack Overflow用户
发布于 2020-10-15 19:52:51
框架类有背景渐变颜色和10 has边框浅粉红色。孩子的背景是白色的。
.frame {
background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;
width: 300px;
height: 400px;
border: 10px solid #F5E9D9;
padding: 10px;
}
.form {
display: block;
background: #fff;
padding: 15px;
width: 100%;
height: 100%;
box-sizing: border-box;
}<div class="frame">
<div class="form">
form
</div>
</div>
Stack Overflow用户
发布于 2020-10-15 19:45:08
我就是这样做的：
body{
margin:0;
}
div{
background-color:white;
position:relative;
max-width:300px;
padding:15px;
margin:15px;
}
.cool-border::before{
content:'';
background-image: linear-gradient(135deg, #d63286 12.50%, #ffffff 12.50%, #ffffff 25%, #ebb7b7 25%, #ebb7b7 37.50%, #fff 37.50%, #fff 50%, #d63286 50%, #d63286 62.50%, #ffffff 62.50%, #ffffff 75%, #ebb7b7 75%, #ebb7b7 87.50%, #fff 87.50%, #fff 100%);
background-size: 84.85px 84.85px;
position:absolute;
z-index:-1;
/* Adjust this for width of border */
left:-18px;
top:-18px;
right:-18px;
bottom:-18px;
border: #F5E9D9 solid 8px;
}<div class="cool-border">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non diam non lacus rutrum euismod. Ut pharetra euismod lectus eget vehicula. Curabitur volutpat cursus pharetra. Quisque sed augue rutrum ipsum ultrices euismod. Praesent mi enim, mattis vitae mauris ac, rhoncus ultricies nibh. Aenean elementum aliquet risus, dictum mattis quam tristique sed. Cras ut elit magna. Proin sed euismod sapien. Pellentesque eget congue dolor, eu condimentum nulla. Ut gravida varius risus, et ullamcorper ipsum posuere et.</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64378469
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号