《CSS3实战》笔记--渐变设计（一)
基于CSS的渐变与图片渐变相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE虽然可以通过滤镜的方式实现，但并不提倡。
Webkit引擎（Safari 4及以上版本）的CSS渐变设计
基本语法：
-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)
参数说明：
<type>:定义渐变类型，包括线性渐变（linear）和径向渐变（radial）。
<point>:定义渐变起始点和结束点坐标，即开始应用渐变的x轴和y轴坐标，以及结束渐变的坐标。该参数支持数值，百分比和关键字，如（0，0）或者（left，top）等。关键字包括top，bottom，left和right。
<radius>:当定义径向渐变时，用来设置径向渐变的长度，该参数为一个数值。
<stop>:定义渐变色和步长。包括三个类型值，即开始的颜色，使用from （color value）函数定义；结束的颜色，使用to（color value）函数定义：颜色步长，使用color-stop（value，color value）定义。color-stop（）包含两个参数值，第一个参数值为一个数值或者百分比值，取值范围为0~1.0（或者0%~100%），第二个参数值表示任意颜色值。
直线渐变基本用法：
/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));
演示效果：
/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));
演示效果：
/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));
演示效果：
/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));
演示效果：
小结：color-stop（）函数包含两个参数值，第一个参数值指定角标位置，第二个参数指定色标颜色。一个渐变可以包含多个色标，位置值为0~1之间的小数，或者0~100%之间的百分数，指定色标的位置比例。
径向渐变的基本用法
/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));
效果显示：
/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));
演示效果：
/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));
演示效果：
/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));
演示效果：
/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
演示效果：
/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));
演示效果：
/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));
演示效果：
/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;
演示效果：
渐变应用定义渐变效果的边框
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
border-width: 20px;
width: 400px;
height: 200px;
margin: 20px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
演示效果：
定义填充内容效果
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
width:400px;
height:200px;
border:10px solid #A7D30C;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
float:left;
}
.div1::before {
width:400px;
height:200px;
border:10px solid #019F62;
content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
display: block;
}
</style>
</head>
<body>
<div class="div1">透视框</div>
</body>
</html>
显示效果：
定义列表图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>
<body>
<ul>
<li>新闻列表项1</li>
<li>新闻列表项2</li>
<li>新闻列表项3</li>
<li>新闻列表项4</li>
</ul>
</body>
</html>
演示效果：
相关推荐
-
使用 stylelint检查CSS_StyleLint
当你书写大量的CSS代码时,可能会出现不止一个的错误.可能需要某个工具来阻止你CSS书写的错误. 可能,有的时候你的错误真的是一个bug.也有可能仅仅因为草率造成的不一致或者不明确的代码风格.可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西.事情的后果不是你可以想象的. 你尝试去控制自己.你的同事也帮助你,当你游离及时纠正你的错误.但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了.后来,你或者其他
-
《CSS3实战》笔记--渐变设计（二)
Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标.当指定一个值时,另一个值默认为 cen
-
《CSS3实战》笔记--渐变设计（三)
IE浏览器引擎的CSS渐变实现方法 IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果. 基本语法 该参数的参数说明如下: enabled:设置或检索滤镜是否激活.可选布尔值,包括 true 和 false,默认值为 true ,表示激活状态. startColor :设置或检索色彩渐变的开始颜色和透明度.可选项,其格式为#AARRGGBB.AA,RR,GG,BB为十六进制正整数,取值范围为00~FF.RR指定红色值,GG指定绿色值,BB指定蓝色值,AA指定透明度,00是完全
-
《CSS3实战》笔记--渐变设计（一)
基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更加自然.目前,实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器,基于Presto引擎的Opera浏览器暂时不支持渐变,基于Trident的IE虽然可以通过滤镜的方式实现,但并不提倡. Webkit引擎(Safari 4及以上版本)的CSS渐变设计 基本语法: -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<
-
SpringCloud远程服务调用实战笔记
笔记 在微服务中,若想要使用远程调用,需要引入spring-cloud-starter-openfeign(在使用注册中心的环境下) <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-openfeign</artifactId> <version>xxx</version> </depe
-
Bootstrap源码学习笔记之bootstrap进度条
基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr
-
6款新颖的jQuery和CSS3进度条插件推荐
现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress
-
python动态网站爬虫实战(requests+xpath+demjson+redis)
目录 前言 一.主要思路 1.观察网站 2.编写爬虫代码 二.爬虫实战 1.登陆获取cookie 三.总结 前言 之前简单学习过python爬虫基础知识,并且用过scrapy框架爬取数据,都是直接能用xpath定位到目标区域然后爬取.可这次碰到的需求是爬取一个用asp.net编写的教育网站并且将教学ppt一次性爬取下来,由于该网站部分内容渲染采用了js,所以比较难用xpath直接定位,同时发起下载ppt的请求比较难找. 经过琢磨和尝试后爬取成功,记录整个爬取思路供自己和大家学习.文章比较详细,对
-
Bootstrap每天必学之进度条
1.进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ☑ LESS版本:源码文件progress-bars.less ☑ Sass版本:源码文件_progress-bars.scss ☑ 编译后版本:bootstrap.css文件第4500行-第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用. 2.进度条–基本样
-
python全栈要学什么 python全栈学习路线
IT行业,技术要比学历.年龄.从业经验更为重要,技术水平直接决定就业薪资,想要学好python,首先要先了解精通Python语言基础.Python web开发.Python爬虫.Python数据分析这四大方面. 全栈即指的是全栈工程师,指掌握多种技能,并能利用多种技能独立完成产品的人.就是与这项技能有关的都会,都能够独立的完成. 全栈只是个概念,也分很多种类.真正的全栈工程师涵盖了web开发.DBA .爬虫 .测试.运维,要学的内容那是相当的巨量.就web开发方向而言需要学习的内容:前端知识 包
-
Spring--国内Java程序员用得最多的框架
目录 第一节:Spring Framework核心技术底层原理详解 1.Spring 概述 2.核心思想 3.S手写实现 IoC 和 AOP 4.Spring IOC 应用 5. Spring IOC源码深度剖析 6.Spring AOP 应用 7.Spring AOP源码深度剖析 第二节:Spring Boot技术难点源码深入剖析 第一部分:基础应用开发 第二部分:分布式应用开发 第三部分:核心技术源代码分析 第三节:阿里微服务Spring Cloud Alibaba架构实战笔记 第四节:Sp