首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css3实现圆角边框渐变

css3实现圆角边框渐变

作者头像
就只是小茗
发布2018-03-07 11:40:02
2.6K0
发布2018-03-07 11:40:02
举报
<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样式

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-03-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档