css3实现圆角边框渐变

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • CSS深入理解学习笔记之absolute

    1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

    就只是小茗
  • CSS样式声明顺序

    来自Bootstrap中文网编程规范 相关的属性声明应当归为一组,并按照下面的顺序排列: Positioning Box model Typographic V...

    就只是小茗
  • CSS3绘制一个小雨滴,见证它的成长之路

    重新配色,通过background渐变属性radial-gradient,添加渐变,具有高光效果

    Javanx
  • 60个非常实用的CSS代码片段,千万要收藏好了!

    如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

    winty
  • WordPress美化之文章内页新增彩色渐变框【共9套】

    其实今天这个CSS之前博客内发过,最早是春节疫情期间在家美化向日葵的时候写的。今天突然心血来潮想到这个完全可以做到文章内页里。遂动手适配。在此分享给各位。钻芒博...

    AlexTao
  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美
  • 使用纯CSS来画一颗鸡蛋

    所以接下来我们要给它增添一个border-radius 以及一个background-color 属性:

    学前端
  • 【neumorphism】CSS实现新拟态设计风格 计算器

    咪啪咪啪
  • 你不知道的css(一)

    最近在看张鑫旭老师的《css世界》,记录第二章有关宽高很有意思的东西: 1.如何用html片段实现一个凹和凸字呢?

    2014v

扫码关注云+社区

领取腾讯云代金券