文档章节

CSS3里的渐变

但行好事_
 但行好事_
发布于 2016/10/13 17:59
字数 488
阅读 1
收藏 0

渐变

      有了渐变再也不用去切1px的图再重复了..

      -webkit- 是浏览器前缀, 表示特定浏览器对一个属性还在实验阶段, 在这里顺便写下各个浏览器的前缀:

      chrome/ safari     -webkit-

      firefox                 -moz-

      IE                        -ms-

      opera                  -o-

      为了各个浏览器能够识别, 我们要把每种前缀都要写一遍... 对了, 只有自己浏览器能识别带自己前缀的属性.

      background-image: -webkit-linear-gradient(top, red, blue); 

  要注意渐变是 background-image 而不是 background-color!

 

      前缀有了, linear 表示线性, gradient 表示渐变.

      第一个参数表示 从哪里开始(默认是 top), 有:top/ right/ bottom/ left 四个值(我还好死不死的试试 center 然并卵0..0), 但可以组合使用: background-image: -webkit-linear-gradient(top left, red, blue); 表示从左上角开始. 

      还可以用度数表示,以下是 0 deg:  

  background-image: -webkit-linear-gradient(0deg, red, blue); 

      以下是90deg:

  background-image: -webkit-linear-gradient(90deg, red, blue); 可以理解为逆时针旋转90deg(谁会关心这个..).

 

     第二个和第三个参数并非只可以有这俩, 看你想让他渐变多少种颜色, 比如你可以这样玩:

  咳咳, 能看出重复多少遍的加我Q: 758325009, 给认真的人一个大红包..

 

 

颜色参数不仅仅只写颜色, 还可以设置从哪里个位置开始渐变这个颜色:

background-image: -webkit-linear-gradient(top left, red, blue 25%, yellow 90%); 这个百分数是相对于渐变的方向那个边, 表示到这个位置时就已经完全变为该颜色, 说的麻烦, 看下图:

 

除了可以一个方向上变化, 还可以 radial 辐射状渐变.

  background-image: -webkit-radial-gradient(center center , red, blue); 此时第一个参数就可写 center center.

      特别的, 当是 radial 渐变时, 可以用 0px 0px 和 30% 30%, 这两个数值分别是辐射中心相对于 X 轴和 Y 轴的偏移量, 如下:

  background-image: -webkit-radial-gradient(0px 0px, red, blue); 

  background-image: -webkit-radial-gradient(25% 25%, red, blue);

© 著作权归作者所有

但行好事_
粉丝 0
博文 4
码字总数 2701
作品 0
海淀
程序员
私信 提问
10款精心挑选的在线 CSS3 代码生成工具

今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效。 CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大...

cacao111
2018/07/11
0
0
实用的 CSS3 参考手册和代码生成工具

CSS3技术现在越来越成熟,通过CSS3的一些新特性(如box-sizing、边界半径、文字阴影、渐变等)创建的效果已经令前端开发者兴奋不已。使 用CSS3进行前端设计是未来的发展趋势。因此,如果你是...

oschina
2012/06/19
2.9K
5
css的线性渐变详解

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

筱飞
2016/12/21
31
0
CSS3 渐变(Gradients)

CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡。 以前,您必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和宽带的使...

wybo521
2016/01/23
15
0
推荐 10 个超棒的 CSS3 代码生成工具

新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。 但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全...

oschina
2015/08/25
16.2K
28

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部