css3整理--gradient
gradient语法:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) // chrome的新版写法和FF的一致,只要改版前缀即可
第一个参数:指定渐变方向。例如:top,从上向下渐变;left,从左向右渐变; left top,从左上向右下渐变
第二个参数:指定起始点的颜色值
第三个参数:指定结束点的颜色值
还可以加参数,如:
background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
可以指定多个颜色值,如果不同时指定百分比,则平均分配位置,否则,通过指定某个颜色值渐变到百分之多少的位置。
还可以指定角度:
background: -moz-linear-gradient(left 30deg, #ace, #f96);
如果设置left,不设置角度,则为从左到右渐变;
如果设置left,同时设置90deg,则为从上到下渐变;
background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);(径向渐变)
第一个参数指定位置:bottom left指从左下角开始渐变
第二个参数指定渐变的形状:ellipse指椭圆形渐变
第三到第六个参数指定渐变的颜色,同样可以指定百分比
css3整理--gradient的更多相关文章
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css3整理-方便查询使用
最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...
- css3之gradient
radial-gradient The CSS radial-gradient() function creates an <image> which represents a gradi ...
- css3整理--filter
只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...
- css3整理--clip
clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...
- css3整理--::selection
::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...
- css3整理--calc()
calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...
- css3整理--media
media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href=&q ...
- css3整理--box-sizing
box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的 ...
随机推荐
- 【转】在64位windows下使用instsrv.exe和srvany.exe创建windows服务
本文转自:https://www.iflym.com/index.php/computer-use/201205020001.html 在32位的windows下,包括windows7,windows ...
- 干货分享 超炫丽的HTML5/jQuery应用及代码
今天我们要来分享一些HTML5干货,对于前段开发者来说,这些HTML5应用和jQuery插件将会让你的项目更加生动和炫丽,至少在UI设计方面,或多或少会带给你一点设计灵感,赶紧收藏和分享吧.另外这些H ...
- springboot+shiro+redis(集群redis版)整合教程
相关教程: 1. springboot+shiro整合教程 2. springboot+shiro+redis(单机redis版)整合教程 3.springboot+shiro+redis(单机red ...
- java项目中的路径获取,request
java web项目中获取项目根路径(tomcat可运行的web源码的路径)的方式: 分为两种情况: 情况一: 在eclipse.inde等开发工具中获取(注:如下代码所在的类必须是控制层所在包下的类 ...
- ngx-bootstrap学习笔记(一)-popover
前言 这月做了个ng2模块,其中有个校验功能,当校验不通过时给出提示,项目中使用jQuery实现,今天才发现ngx-bootstrap已经有现成功能了,且可封装成通用组件放入shareModule,使 ...
- 【转帖】Linux发行版:CentOS、Ubuntu、RedHat、Android、Tizen、MeeGo
Linux发行版:CentOS.Ubuntu.RedHat.Android.Tizen.MeeGo作者:阳光岛主 原文在这儿 Linux,最早由Linus Benedict Torvalds在199 ...
- POI简易帮助文档系列--读取Excel文件
上篇博客通过简单的几行代码就学会了POI新建Excel文档的使用,本篇博客也从简单出发,通过查看POI的官网文档和一个简单的代码实例,学习怎么遍历出一个Excel文档的内容. package com. ...
- iview 下拉刷新loadTop报错解决
<div class="noData" v-if="lifeList.length==0"> <img src="../assets ...
- 双调旅行商问题 (Bitonic TSP)
问题描写叙述: 上述问题能够使用动态规划的方法来解决. 以下是解决思路的详细介绍: 1. 最优子结构: 如果d[i][j]表示从起点1出发到达i及j两个顶点的最短路程之和. 为此能够如果K为此段路程上 ...
- nodejs服务器部署教程四
nodejs服务器部署最后一篇文章,部署ssl证书,升级http为https,其实网上相关教程有很多,但是略麻烦,本教程让你一切从简,5分钟搞定https,免费一年哦 申请ssl证书 免费申请的机构有 ...