上次我说的边框颜色渐变有个缺陷就是不能控制圆角,今天写个阴影颜色渐变圆角边框
实例代码:
<style>
.xulgr-input{margin:40px;}
.xulgr-input2{margin:40px;}
.xulgr-input{
position: relative;
border: 4px solid transparent;
border-radius: 10px;
background: linear-gradient(orange, violet);
background: transparent;
background-clip: padding-box;
padding: 10px;
box-shadow: 0 3px 9px #f151af, inset 0 0 9px #4d74f8;
color:#000;
font-size: 18px;
}
.xulgr-input2{
position: relative;
border: 4px solid transparent;
border-radius: 30px;
background: linear-gradient(orange, violet);
background: #4d74f8;
background-clip: padding-box;
padding: 10px;
box-shadow: 0 3px 9px #f151af, inset 0 0 9px #4d74f8;
color:#000;
font-size: 18px;
}
.xulgr-input::after{
position: absolute;
top: -4px; bottom: -4px;
left: -4px; right: -4px;
z-index: -1;
border-radius: 10px;
color:#000;
}
.xulgr-input2::after{
position: absolute;
top: -4px; bottom: -4px;
left: -4px; right: -4px;
z-index: -1;
border-radius: 10px;
color:#000;
}
.xulgr-input-nr{text-align:center;margin-top:20px;margin-bottom:20px;}
</style>
<center style="font-size:40px;margin-top:40px;">阴影颜色渐变圆角边框</center>
<div class="xulgr-input">
<div class="xulgr-input-nr">
阴影颜色渐变圆角边框
</div>
</div>
<div class="xulgr-input2">
<div class="xulgr-input-nr">
阴影颜色渐变圆角边框
</div>
</div>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。