阴影颜色渐变圆角边框

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

 

实例代码：

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

 

运行代码