【CSS3】渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
div{
width: 300px;
height: 200px;
border:solid;
}
#div1{
/*background-image: linear-gradient(red,blue);*//*默认从上到下*/
/*background-image: linear-gradient(0deg,red,blue);*//*0deg从下到上*/
/*background-image: linear-gradient(to right,red,blue);*/
/*background-image: linear-gradient(to left,red,blue);*/
/*background-image: linear-gradient(to right bottom,red,blue);*/
/*background-image: linear-gradient(to right,red,green,blue);*/
/*background-image: linear-gradient(to right top,red 25%,green 50%,orange 75%,blue 100%);*/
/*background-image: linear-gradient(to right top,red 0px,green 100px,orange 200px,blue 300px);*/
background-image: repeating-linear-gradient(to right top,red 0px,green 10px,orange 20px,blue 30px);/*30px之后开始重复渐变设置*/
}
#div2{
/*background-image: radial-gradient(red,blue);*//*默认从里到外*/
/*background-image: radial-gradient(circle,red,green,blue);*//*默认ellipse椭圆,可设circle圆*/
/*background-image: radial-gradient(circle at right,red,green,blue);*/
/*background-image: radial-gradient(circle at left bottom,red,green,blue);*/
/*background-image: radial-gradient(circle 50px,red,green,blue);*//*50px为半径*/
/*background-image: radial-gradient(circle farthest-corner,red,green,blue);*//*半径除了可以像素如50px,还可用关键字closest-side圆心到距离最近的边、farthest-side圆心到距离最远的边、closest-corner圆心到距离最近的角、farthest-corner圆心到距离最远的角*/
background-image: repeating-radial-gradient(circle closest-side,red,green,blue);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="button" value="渐变按钮" class="b1">
<input type="button" value="渐变按钮" class="b1 b2">
<input type="button" value="渐变按钮" class="b1 b2 b3">
</body>
</html>
.b1{
padding: 5px 10px;
font-size: 15px;
text-shadow: 3px 3px 3px rgba(0,0,0,0.6);
background-image: linear-gradient(to left bottom,pink,green);
}
.b2{
border-radius: 10px;
}
.b3{
border-radius: 1em;
}
.b1:hover{
background-image: linear-gradient(to right top,pink,green);
}
【CSS3】渐变的更多相关文章
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- css3 渐变记
css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...
- Css3渐变实例Demo(一)
1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- Web前端方向课程要点:CSS3渐变制作过程
CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...
- 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
随机推荐
- oracle一些基本命令
Oracle安装配置 设置四个账户及对应的密码 No. 用户名 口令 1 sys change_on_install 2 system manager 3 scott tiget 4 sh sh 上面 ...
- Celery 源码解析六:Events 的实现
在 Celery 中,除了远程控制之外,还有一个元素可以让我们对分布式中的任务的状态有所掌控,而且从实际意义上来说,这个元素对 Celery 更为重要,这就是在本文中将要说到的 Event. 在 Ce ...
- 用JAVA中BufferedImage画出漂亮的验证码点击变化
如果我们想用JAVA中BufferedImage画出漂亮的验证码点击变化怎么实现呢,类似这样: 点击变化,以下是实现过程,直接上代码: 首先前台:<i><img style=&quo ...
- eclipse中Maven工程使用Tomcat7以上插件
Maven中使用tomcat:run命令默认是使用Tomcat6的版本, 现在要用到Tomcat7以上的版本,在eclipse的Maven工程中配置如下 第一步:在项目的pom里面加入如下配置: 官网 ...
- 一个页面tab标签切换,都有scroll事件的解决办法
当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
- BST 解析 (一)
这篇博文主要初步介绍Binary Search Tree(BST)的一些基本功能以及应用场景,由于BST的相关知识比较多,下一节会接着补充BST的一些功能.这一节主要分为以下三个要素: BST 的定义 ...
- SpringQuartz 实现定时任务调度
最近公司新项目需要用到定时器,于是研究了一下发现: Spring中使用Quartz有两种方式实现: 第一种是任务类继承QuartzJobBean 第二种则是在配置文件里定义任务类和要执行的方法,类和方 ...
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- PHP招聘那些事,公司真的不需要培训班出来的人么?
就业形势严峻的情况下,每个企业对于人才的需求都不一样,并不是说公司不愿意招聘培训班出来的人,而是看你的能力是不是能胜任企业招聘人才的需求,是不是能给企业带来价值的人. 现在市面上的培训机构多如牛毛,然 ...
- CentOS安装Nginx 报错“configure: error: the HTTP rewrite module requires the PCRE library”解决办法
错误提示: ./configure: error: the HTTP rewrite module requires the PCRE library. yum install gcc gc ...