<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. IOS 拼接按钮文字

    NSMutableString *tempAnswerTitle=[[NSMutableString alloc]init]; for(UIButton *answerBtn in self.answ ...

  2. 2018.8.18 servlet使用的会话跟踪除session外还有哪些方式

    解释HTTP HTTP是一种无连接的协议,如果一个客户端只是单纯地请求一个文件(HTML或GIF),服务器端可以响应给客户端,并不需要知道一连串的请求是否来自于相同的客户端,而且也不需要担心客户端是否 ...

  3. 关于IDataReader.GetSchemaTable的一些事情

    http://stackoverflow.com/questions/1574492/how-does-getschematable-work The implementation of IDataR ...

  4. SQL Server 2008 R2 附加数据库 “尝试打开或创建物理文件 拒绝访问”的解决办法

    其实是来自一篇SQL Server 2005同样错误的帖子,不过试了在SQL Server 2008 R2下面也有效,记录一下. 解决方法: 在所有程序—Microsoft SQL Server 20 ...

  5. xshell 连接虚拟机过程

    (1)Ctrl+Shift+T 打开终端 terminal (2)ifconfig得到ip网络地址 (3)ssh安装已经打开ssh服务 (4)安装openssh-server sudo apt ins ...

  6. 前端jQuery之属性操作

    属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...

  7. Django 单元测试

    mock 测试 mock 是辅助单元测试的模块,用于测试不方便调用的别人的接口.举个简单的例子,比如说,我们测试django 写的微信登录接口,正常流程下,我们需要前端拉起授权窗口,获取jscode或 ...

  8. JSON 与 XML 的比较 - iOS

    在与 web 服务进行数据交换的时候,通常支持两种主要的数据格式(即:JavaScript 对象表示法 JSON 与可扩展标记语言 XML),两者在可读性上都不分高下,接下来对此进行简单的总结和分析, ...

  9. Excel文档数据转成Plist文件

    有时候我们需要导入大量数据到App中静态数据,但数据又是存在Excel中,怎么办? 第一,复制数据粘贴到一个.txt文本文档中 第二,就是撸代码了 比如,我需要导入的数据表有2列字段,name和bar ...

  10. 基于 win7下虚拟机的 GNSS-SDR安装过程

    最近在安装 GNSS-SDR软件时,遇到了很多问题,这里回顾了我的安装过程,罗列了所遇到的问题和解决办法.希望后来者不要再踩这些坑了! 首先,在官方文档中看到,GNSS-SDR目前并不支持直接在 Wi ...