그라데이션 테두리
14751 단어 csshtmljavascript
border:4px solid;
border-image: linear-gradient(135deg,#FF0000 0%,... #FF00AB 100%)1;
<div class="stripe-1"></div>
<div class="stripe-1 blue-stripe-1"></div>
<div class="stripe-2"></div>
<div class="stripe-2 blue-stripe-2"></div>
<div class="stripe-1 stripe-3"></div>
<div class="stripe-1 stripe-3 blue-stripe-3"></div>
<div class="stripe-2 stripe-4"></div>
<div class="stripe-2 stripe-4 blue-stripe-4"></div>
body{background-color:#283470;}
.stripe-1{
position:absolute;
top: 10px;
left: 10px;
height: 10px;
width: 98%;
background: -webkit-linear-gradient(left,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-1{
background: -webkit-linear-gradient(left,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(90deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
top:20px;
height:5px;
}
.stripe-2{
position:absolute;
top:10px;
left:10px;
height: 98%;
width: 10px;
background: -webkit-linear-gradient(top,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(180deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-2{
gradient(top,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(180deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
left:20px;
width:5px;
}
.stripe-3{
top:auto;
bottom:10px;
right:10px;
left:auto;
background: -webkit-linear-gradient(right,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(-90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-3{
background: -webkit-linear-gradient(right,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(-90deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
bottom:20px;
height:5px;
}
.stripe-4{
top:auto;
bottom:10px;
right:10px;
left:auto;
background: -webkit-linear-gradient(bottom,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
background: linear-gradient(-180deg,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
}
.blue-stripe-4{
gradient(bottom,rgba(58, 32, 92,.0),#17E1E3);
background: linear-gradient(-180deg,rgba(58, 32,92,.0),#17E1E3);
z-index:-1;
right:20px;
width:5px;
}
Reference
이 문제에 관하여(그라데이션 테두리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sababg/gradient-borders-1gfi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)