阴影颜色渐变圆角边框

上次我说的边框颜色渐变有个缺陷就是不能控制圆角，今天写个阴影颜色渐变圆角边框

实例代码：

<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>

运行代码

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。