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样式
css3实现圆角边框渐变的更多相关文章
- CSS3(1)---圆角边框、边框阴影
CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...
- css3 背景色 实现边框渐变运动动画
css3 #body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-anima ...
- css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
- CSS3——边框 圆角 背景 渐变 文本效果
边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...
- CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影
圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- css3学习总结2--CSS3圆角边框
绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...
- css3圆角边框,边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
随机推荐
- vsftpd 启动 vsftpd:500 OOPS: bad bool value in config file for: guest_enable
不然启动时会涌现毛病,举个例子 guest_enable=YES 后面出现空格,就会出现 为 vsftpd 启动 vsftpd:500 OOPS: bad bool value in config ...
- BFS变换素数,POJ(3126)
题目链接:http://poj.org/problem?id=3126 解题报告: #include <iostream> #include <queue> #include ...
- 2018.8.2 Juint测试介绍及其命名的规范
JUnit - 测试框架 什么是 Junit 测试框架? JUnit 是一个回归测试框架,被开发者用于实施对应用程序的单元测试,加快程序编制速度,同时提高编码的质量.JUnit 测试框架能够轻松完成以 ...
- 2017.11.17 C++系列---用malloc动态给c++二维数组的申请与释放操作
方法一:利用二级指针申请一个二维数组. #include<stdio.h> #include<stdlib.h> int main() { int **a; //用二级指针动态 ...
- JavaWeb —— JSP 总结
JSP总结 静态网页 在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为“静态网页”,静态网页是标准的HTML文件,它的文件扩展名是.htm..html .静态网页是 ...
- CRC32为例详细解析(菜鸟至老鸟进阶)
CRC-知识解析 cyclic redundancy check 写在前面的话: 之前在做学校项目的时候用到了CRC 原理,但在网上查找的过程中,发现讲解CRC知识的资源很多,但是对新手比较友好的.讲 ...
- 利用deadline_timer实现定时器Timer
// 类似QTimer的定时器 class Timer { typedef void(* handler)(); public: Timer() : m_millseconds() , m_timer ...
- LeetCode997. Find the Town Judge
题目 在一个小镇里,按从 1 到 N 标记了 N 个人.传言称,这些人中有一个是小镇上的秘密法官. 如果小镇的法官真的存在,那么: 小镇的法官不相信任何人. 每个人(除了小镇法官外)都信任小镇的法官. ...
- elasticsearch-dsl笔记
一.elasticsearch安装 安装java1.8以上 安装elasticsearch-rtf(https://github.com/medcl/elasticsearch-rtf) head插件 ...
- mac上配置java jdk环境
访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2.点击“JDK DOWNLOAD”按钮: 3.选择“Accept Lisence Ag ...