【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)即可 ...
随机推荐
- 单例模式/ThreadLocal/线程内共享数据
import java.util.Random; public class ThreadDemo3 { public static void main(String[] args) { for(int ...
- while循环小练习-猜答案
条件 1.每个用户只能猜10次产品的价格2.每次猜玩价格,提示用户价格是多了还是少了或者对了3.如果用户才对则终止程序执行 break! i = 0 #设置一个次数变量 price = 38 #设置一 ...
- laravel 嵌套的渴求式加载
今天在通过需求表A查询场地类型表B,然后通过表B的场地类型id去查询表C场地类型名的时候遇到了一个小的问题. 需求表A的字段:id.user_id .name等等: 中间表B的字段:id.appeal ...
- Listview嵌套Listview
今天做项目,打算模仿淘宝的订单管理,需要Listview嵌套Listview,都是两个控件都是沿着一个方向滑动的,嵌套在一起不幸福,以下是解决方案,打个笔记,以后估计还得用: 其中onMeasure函 ...
- C语言之for循环
#include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ int i; for(i=1;i< ...
- WebRTC介绍及简单应用
WebRTC介绍及简单应用 WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. WebRTC实时 ...
- ##2.基础服务(SQl,RabbitMQ)-- openstack pike
2-基础服务(SQl,RabbitMQ) openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.基础服务(Mysql ...
- 【17-06-16】Java入门测试题,测测你基础知识掌握程度(附答案及个人解析)
描述 前几天在知乎里看到一份这样的题,当时只是随便做了一下,对了一下答案.昨天又有了一份进阶的题,里面有些还是需要记录一下,于是就从这个入门的题开始. 题目和答案来自阿里云大学 - 知乎专栏 题目 现 ...
- H5页面项目的思路整理
这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图 ...
- codeforces 893C Rumor 前向星+dfs
893C Rumor 思路: 前向星+DFS 代码: #include <bits/stdc++.h> using namespace std; #define _for(i,a,b) f ...