<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. git优点缺点(简单介绍)

    什么是Git Git是目前世界上最先进的分布式版本控制系统. Git是免费.开源的 最初Git是为辅助 Linux 内核开发的,来替代 BitKeeper 作者 Linux和Git之父李纳斯·托沃兹( ...

  2. mapping4java源码下载(alibab的开源项目)

    项目中需要频繁实现json-->pojo,Bean-->Bean的转换,使用了mapping4java这个开源的框架: 网上查资料,该框架是愤怒的苹果提供的,附上原文地址 我也造了个轮子: ...

  3. Java框架 面试题总结

    一. Struts1.x 4 1. struts1优缺点,为什么要使用struts1 4 2. Struts1核心组件 4 3. Strust1请求处理流程  工作原理 4 4. Struts1线程安 ...

  4. 2.Spring Cloud初相识--------Eureka服务注册与消费

    前言: 1.Eureka介绍: Spring Cloud Eureka,使用Netflix Eureka来实现服务注册与发现,它既包含了服务端组件,也包含了客户端组件,并且服务端与客户端均采用Java ...

  5. textkit

    更详细的内容可以参考官方文档 <Text Programming Guide for iOS>. “Text Kit指的是UIKit框架中用于提供高质量排版服务的一些类和协议,它让程序能够 ...

  6. 洛谷P4316 绿豆蛙的归宿(期望)

    题意翻译 「Poetize3」 题目背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出 ...

  7. ABAP Table Control

    SAP中,Table Control是在Screen中用的最广泛的控件之一了,可以实现对多行数据的编辑.  简单来说,Table Control是一组屏幕元素在Screen上的重复出现,这就是它与普通 ...

  8. ubuntu built-in display 产生的一个原因

    在没有禁用开源的显卡驱动 nouveau 下,从 apt 安装了nvidia的驱动,导致了后面开机后,系统不能正确的识别到显示器,整个界面分辨率变的非常小,在设置菜单中的显示设置中也不能调节分辨率,并 ...

  9. Laravel系列 Web

    一.Homestead准备 上一篇文章已经对它的配置进行了说明,下面对Homestead.yaml进行说明 --- ip: "192.168.10.10" memory: 2048 ...

  10. Ajax全解析

    什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网 ...