[英]How to style borders of a div in css
有人可以帮我制作像下面示例中的效果吗? 我试图在响应部分不成功......
我能得到的最接近的是下面的代码和图像:
.content .card-l {
margin-top: 1vh;
position: relative;
border-top: 2px solid #00ffde;
border-bottom: 2px solid #c9ff04;
border-left: 2px solid #5bff69;
border-right: 2px solid #2a43c1;
}
.content .card-l::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #ba6c0e;
border-bottom: 3px solid #d3cc0b;
border-left: 3px solid #990be6;
border-right: 3px solid #9a1b3b;
}
.content .card-l::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #070400;
border-bottom: 3px solid #ff8f3a;
border-left: 3px solid #1b9fbd;
border-right: 3px solid #d87777;
}
.content .card-l .card-content {
position: relative;
background: #e0bf95;
padding: 30px;
border-top: 2px solid #82f577;
border-bottom: 2px solid #1c1f31;
border-left: 2px solid #d6d254;
border-right: 2px solid #f380de;
}
.content .card-l .card-content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #18fd03;
border-bottom: 3px solid #34eca3;
border-left: 3px solid #5528e9;
border-right: 3px solid #df2cec;
}
.content .card-l .card-content::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 3px solid #806c53;
}
您可以考虑多个背景和clip-path
,如下所示:
.box { --c1:#806c53; /* first color */ --c2:#5d4e39; /* second color */ --b:20px; /* border width */ margin:10px; width:200px; height:100px; font-size:25px; outline:3px solid #321f1a; /* outer border */ border:var(--b) solid transparent; padding:3px; /* control the inner border */ background: linear-gradient(#e0bf94 0 0) content-box, /* main background */ linear-gradient(#321f19 0 0) padding-box; /* inner border */ position:relative; } /* main border */.box:before, .box:after { content:""; position:absolute; z-index:-1; top:calc(-1*var(--b)); right:calc(-1*var(--b)); bottom:calc(-1*var(--b)); left:calc(-1*var(--b)); background: linear-gradient(var(--s1,var(--c1)) 0 0) center/calc(100% - var(--b)) calc(100% - var(--b)) no-repeat, linear-gradient(var(--s2,var(--c2)) 0 0); }.box:after { --s1:var(--c2); --s2:var(--c1); clip-path: polygon(0 0,0 100%,var(--b) calc(100% - var(--b)), var(--b) var(--b),calc(100% - var(--b)) var(--b),100% 0); }
<div class="box"> some text here </div> <div class="box" style="--b:30px;--c1:red;--c2:darkred;width:300px;"> some text here </div> <div class="box" style="--b:10px;--c1:blue;--c2:darkblue;width:300px;"> some text here </div>
在这里你可以找到一个例子
.content { border: 2px solid #321f19; }.card-l { border-top: 4px solid #5d4e39; border-right: 4px solid #806c53; border-bottom: 4px solid #806c53; border-left: 4px solid #5d4e39; }.card-content { border-top: 4px solid #806c53; border-right: 4px solid #5d4e39; border-bottom: 4px solid #5d4e39; border-left: 4px solid #806c53; position: relative; background-color: #e0bf94; }.card-content::before { content: ""; width: calc(100% - 4px); /*remove one border size from the 100%*/ height: calc(100% - 4px); /*remove one border size from the 100%*/ position: absolute; border: 2px solid #321f19; } span { display: block; padding: 30px; text-align: center; z-index: 1; }.btn { margin: 10px auto; display: block; position: relative; padding: 10px; }
<div class="content"> <div class="card-l"> <div class="card-content"> <button id="button" class="btn">hello!!!</button> </div> </div> </div>
这是一个仅使用一个 div 的示例,没有额外的容器或跨度,利用了box shadow和:after伪元素。
.card-1 { position: relative; padding: 4rem; background: #e0bf94; box-shadow: 0 0 0 2px #321f19; /* outer border */ border: 4px solid; border-color: #5d4e39 #5d4e39 #806c53 #806c53; /* second border */ z-index: 1; }.card-1:after { content: ''; position: absolute; left: 0; right:0; top: 0; bottom: 0; border: 4px solid; border-color: #806c53 #806c53 #5d4e39 #5d4e39; /* third border */ box-shadow: inset 0 0 0 2px #321f19; /* inner and last border */ z-index: -1; }
<div class="card-1"><a href="#">Lorem ipsum</a></div>
你也可以用box-shadow
实现非常相似的东西。
.card-1 { position: relative; padding: 4rem; background: #e0bf94; border: 4px solid; border-color: #5d4e39 #5d4e39 #806c53 #806c53; box-shadow: 0 0 0 2px #321f19, inset -4px 4px 0 0 #806c53, inset 4px -4px 0 0 #5d4e39, inset 0 0 0 6px #321f19; }
<div class="card-1">Lorem ipsum</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.