gpt4 book ai didi

css - 如何为锯齿状边框容器添加边框

转载 作者:行者123 更新时间:2023-11-28 11:27:17 25 4
gpt4 key购买 nike

你好,我在尝试想出一种向具有锯齿状边框的容器添加 1px 边框的方法时遇到了问题,例如:

https://codepen.io/swizenfeld/pen/ZyBybW

body {
background: #f4f4f4;
}
.edge {
width: 100%;
height: 400px;
background: #fff;
margin-top: 30px;
}
.edge:before {
content: " ";
display: block;
position: relative;
width: 100%;
top:-30px;
height:30px;
background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%,
linear-gradient(-135deg, transparent 75%, white 76%) 0 50%;
background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;
}
<div class="edge"></div>

有什么想法吗?

最佳答案

你需要添加更多的linear-gradient()来显示锯齿状的边框

body {
background: #f4f4f4;
}
.edge {
width: 100%;
height: 400px;
background: #fff;
margin-top: 30px;
}
.edge:before {
content: " ";
display: block;
position: relative;
width: 100%;
top:-30px;
height:30px;
background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);
background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;
}
<div class="edge"></div>

对于 border-left, -bottom, -right,尝试使用下面的代码片段并查看也为 css 属性提供的注释。

body {
background: #ccc;
}
.edge {
width: 100%;
height: 400px;
background: white;
margin-top: 30px;
border-left:2px solid red;
border-bottom:2px solid red;
border-right:2px solid red;
position:relative; /*make it relative*/
}
.edge:after {
content: " ";
display: block;
position:absolute; /*make it absolute*/
width: 100%;
top:-6px; /* play with top and height too*/
height:23px;
/*background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);*/
background: linear-gradient(45deg,white 14px, red 16px, transparent 17px), linear-gradient(-45deg, white 14px, red 16px, #ccc 17px);

background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;

}
<div class="edge"></div>

关于css - 如何为锯齿状边框容器添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44574533/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com