<!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】渐变的更多相关文章

  1. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  2. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  3. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

  4. Css3渐变实例Demo（一）

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  5. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  6. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  7. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...

  9. Web前端方向课程要点：CSS3渐变制作过程

    CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...

  10. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

随机推荐

  1. STM32基础问题分析——PWM配置

    STM32基础问题分析--PWM配置 在使用STM32F103产生固定频率.固定占空比的PWM波时,虽然有官方以及众多开发板提供的例程,但是关于有点问题并没有说的很清晰,并且<STM32F10X ...

  2. JAVA提高十三：Hashtable&Properties深入分析

    最近因为一些琐碎的事情,导致一直没时间写博客,正好今天需求开发完的早,所以趁早写下本文,本文主要学习的是Hashtable的分析,因为上面一篇文章研究的是HashMap,而Hashtable和Hash ...

  3. iPhone X 网页导航概念

     以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   在移动应用程序设计中,选择汉堡菜单按钮还是标签栏作为导航一直是个古老的争论话题.目前看来,由于 ...

  4. JavaWeb框架SSH_Struts2_(二)

    1.  Struts2的核心配置(详解) 本章内容目录: 配置struts.xml文件 struts.xml文件 常量配置 包配置 包含配置 Action配置 实现Action控制类 配置Action ...

  5. window环境下npm install node-sass报错

    最近准备想用vue-cli初始化一个项目,需要sass-loader编译: 发现window下npm install node-sass和sass-loader一直报错, window 命令行中提示我 ...

  6. [最短路]P1078 文化之旅

    题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一 种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不 同的国家可能有相同的文化.不同 ...

  7. ORACLE 错误代码提示归集

    有时数据库出现问题,不是每次都有网络可查,所以把所有的ora系列的错误整理出来, 在最没有办法的时候,需要自己来解决,有了这些根据,问题会好办的.虽说对于数据库方面, DBA很强大,他们在遇到错误时, ...

  8. deepin 环境变量配置加载顺序

    加载顺序,默认是没有 .bash_profile 文件 1. non-login 方式 ~$ su deepin run /ect/bash.bashrc run .bashrc 2.login 方式 ...

  9. python网络编程之单线程之间的并发

    单线程之间的并发就是利用一个线程实现并发的效果,也就是利用了cup遇到阻塞的那段时间去做别的事情,从而提高了cup的利用率,使之在单个线程中就实现了并发的效果. 下面就是一个简单的服务端单个线程实现并 ...

  10. 使用REST风格架构您需要知道的一些事

    1. REST的由来 2. REST的构成 2.1. 资源 2.2. 资源的表述 2.2.1. MIME(Multipurpose Internet Mail Extensions) 2.2.2. 缓 ...