css3实现圆角边框渐变
程序员文章站
2022-05-11 08:09:18
...
<button class="border">112233</button>
创建button
.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样式
更多专业前端知识,请上【猿2048】www.mk2048.com
上一篇: Laravel 5 基础(八)- 模型、控制器、视图基础流程
下一篇: Oracle 后台进程 说明