<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. jQuery获取Select选择的Text和Value[转载]

    语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var ch ...

  2. 类似LIS+贪心(ZOJ1025)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=25 解题报告: #include <cstdio> #in ...

  3. 20145238-荆玉茗 《Java程序设计》第二周学习总结

    20145238 <Java程序设计>第2周学习总结 教材学习内容总结 关于一些格式方面的问题: 1.关键字:在定义java文件名的时候要避免这些关键字的出现,因为他们在java程序语言中 ...

  4. CPP-基础:类

    1,成员访问属性 一,对于类的实现来说: private:类内部(包括类域范围内)可访问. protect:类内部(包括类域范围内)或 派生类类内部(包括类域范围内)可访问. public: 类内部和 ...

  5. spfa判负权边

    spfa判负环 如果一个点在spfa中被入队了大于n次 那么,我们就能肯定,有负环出现. 因为一个点入队时,他肯定被更新了一次. 所以........ 如果不存在负权环.这个点最多被更新节点数次 我们 ...

  6. 一篇RxJava友好的文章(二)

    上一篇文章介绍了rxjava的基本用法,和一些常用的操作符,以及rxjava的链式操作带来的好处.由于rxjava非常的强大,让我如此的痴迷,我打算写五篇文章,专门讲解rxjava 常见的操作符和用法 ...

  7. 网际协议 IP

    网际协议 网际协议(internet  protocol),简称IP; 概念:TCP/IP网络体系结构中网际层的协议.用以提供无连接的数据服务. 1.IP地址的概念及组成 概念:IP地址就是用来唯一标 ...

  8. 解决nsis error!cant initialize plug-ins directory.please try again later

    情况1: 调用SectionEnd会释放掉dll初始化标记,所有Section都必须放在函数的最下面. 情况2: 有可能是栈里的数据错乱,特别注意的是,使用BgWorker.dll获取多线程能力的时候 ...

  9. POJ2154 Color(Polya定理)

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11654   Accepted: 3756 Description Bead ...

  10. Servlet学习笔记07——什么是cookie,session?

    7)cookie的路径问题 a.什么是cookie路径问题? 浏览器在向服务器上的某个地址发送请求时, 会查看cookie的路径是否与该地址匹配,只有 匹配的cookie才会被发送. b.cookie ...