css3实现圆角边框渐变

?

1	<button class="border">112233</button>

　　创建button

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.border{     position: relative;     border: 4px solid transparent;     border-radius: 16px;     background: linear-gradient(orange, violet);     background-clip: padding-box;     padding: 10px;     /* just to show box-shadow still works fine */     box-shadow: 0 3px 9px black, inset 0 0 9px white; } .border::after{     position: absolute;     top: -4px; bottom: -4px;     left: -4px; right: -4px;     background: linear-gradient(red, blue);     content: '';     z-index: -1;     border-radius: 16px; }

　　css3样式