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

css3实现圆角边框渐变的更多相关文章

  1. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  2. css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

    首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...

  3. css3 背景色 实现边框渐变运动动画

    css3 #body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-anima ...

  4. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  5. CSS3——边框 圆角 背景 渐变 文本效果

    边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...

  6. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  7. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  8. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

  9. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

随机推荐

  1. framework7 1.3.5 路由跳转后DOM失效问题

    再这个版本的7会存在一个问题,那就是loadpage到指定页面后才做其中的DOM比如DIV里面的text或者HTML,虽然控制台会显示改变后的值但是页面上却还是原值,这时候需要改变方法使用reload ...

  2. 轻量级HTTP服务器Nginx(配置与调试Nginx维护Nginx)

    轻量级HTTP服务器Nginx(配置与调试Nginx) 文章来源于南非蚂蚁   Nginx安装完毕后,会产生相应的安装目录,根据前面的安装路径,Nginx的配置文件路径为/opt/nginx/conf ...

  3. Veritas NetBackup™ 状态码"十大"常见报错状态码

    我在刚开始学习Netbackup的时候,没少走弯路.经常会遇到各种稀奇古怪的 error 信息,遇到报错会很慌张,急需一个解决问题的办法.跟无头苍蝇一样,会不加思索地把错误粘到百度上,希望赶紧查找一下 ...

  4. IIS无法识别的属性targetFramework

    出现这种错误是因为发布网站时iis的应用程序池默认使用的是.net framework v2.0.50727.4927,而开发的网站用的是.net framework 4.5,所以会出现这种错误. 我 ...

  5. Python的静态方法和类方法

    Python中使用@staticmethod这个装饰器让方法变为静态方法 一:定义 @staticmethod: 首先它是一个装饰器,被装饰的方法不需要隐含的参数,对象和对象的实例都可以调用静态方法 ...

  6. 牛客小白月赛2 D 虚虚实实 【欧拉图】【连通图】

    链接:https://www.nowcoder.com/acm/contest/86/D来源:牛客网 题目描述 震为雷,临危不乱,亨通畅达:巽为风,柔顺伸展,厚载万物. 震卦:洊雷,震,君子以恐惧修省 ...

  7. 【c学习-2】

    #include <stdio.h> #define MYVAR 18 int main(){ //float x=3.14; //x=3.14++; //printf("%c\ ...

  8. 【转摘】TFS上分支和标签的用法

    引用路径:http://blog.csdn.net/cxzhq2002/article/details/8518250 什么时候用分支:  例如为某个客户定制的专用版本,和主干的特性有很大差别.不具通 ...

  9. 控制器方法重复命名导致nginx 504的问题

    由于控制器方法重复命名重启swoole后运行代码导致 504 Gateway Time-out ,查看laravel日志和nginx日志才找原因所在,以后还是要多看错误日志.

  10. Python全栈day 06

    Python全栈day 06 一.数据类型补充完整 1. 列表(list) 反转reverse list1 = [1,2,3,4,5,6,7,8,9] list1.reverse() print(li ...