CSS3 渐变(Gradients)

栏目: CSS · 发布时间: 4年前

内容简介:因为它是一个比较新的属性,所以它在浏览器中使用时需要添加它的前缀,下面的图片是完全支持该属性的第一个浏览器版本:不同厂商的浏览器的前缀也是不一样的,比如:

1:基本概念

  • 在两个或者多个指定的颜色之间显示平稳的过渡
  • 渐变的效果是由浏览器生成的
  • 渐变的类型主要分为两种:线性渐变(Linear Gradients)和径向渐变(Radial Gradients);线性渐变是一个向上、向下、向左、向右或者对角方向的渐变,而径向渐变则是由它们的中心定义。
  • 作为元素的background-image(background)使用

2:浏览器的支持情况

因为它是一个比较新的属性,所以它在浏览器中使用时需要添加它的前缀,下面的图片是完全支持该属性的第一个浏览器版本:

CSS3 渐变(Gradients)

不同厂商的浏览器的前缀也是不一样的,比如:

.header {
    /* Safari */
    background: -webkit-linear-gradient(red, blue);

    /* Opera */
    background: -o-linear-gradient(red, blue);

    /* Firefox */
    background: -moz-linear-gradient(red, blue);

    /* 标准的语法, 放在最后 */
    background: linear-gradient(red, blue);
}

不同的浏览器厂商在实现这个标准时也是略有不同的,比如关于方向的定义,角度的定义,是顺时针还是逆时针。

3:线性渐变(Linear Gradients)

基本语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

在不添加角度和方向的前提下,默认是从上到下

background: linear-gradient(color1, color2);

从左到右

to right/left/bottom/top
background:linear-gradient(to right,#147B96,#E6D205);

对角(需要把两个方向相结合)

to right bottom/right top/left bottom/left top
background:linear-gradient(to bottom right,#147B96,#E6D205);

使用角度

background: linear-gradient(45deg, #147B96 , transparent);

多种颜色

background: linear-gradient(to right, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
background: linear-gradient(to right, #147B96, #E6D205 50px, #147B96 50px, #E6D205 50px, #147B96);

重复渐变

background: repeating-linear-gradient(to right, #147B96, #E6D205 5%, #147B96 10%, #E6D205 20%);

声明多个- 逗号分隔 - 最先声明优先级最高

background: linear-gradient(green 10px, transparent 10px),
            linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
            linear-gradient(transparent 40px, green 4px);

4:径向渐变 (Radial Gradients)

基本语法

background: radial-gradient(center, shape size, 
start-color, ..., last-color);

渐变中心,整个图形的中心点,既可以使用px,也可以使用%。

background-image: radial-gradient(0% 0%, red, green, blue);

渐变形状,主要是有两种:circle(圆形)和ellipse(椭圆形)

background:radial-gradient(circle, red, green, blue);

渐变大小

  • closest-side - 渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner- 渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side- 渐变的半径长度为从圆心到离圆心最远的边
  • farthest-corner - 渐变的半径长度为从圆心到离圆心最远的角

    background:radial-gradient(circle at farthest-corner, red, green, blue);

渐变中心、渐变形状和渐变大小这三个就是径向渐变的主要使用,除此之外,也可以和线性渐变一样使用多种颜色,重复渐变以及声明多个渐变。

这篇文章主要分享了Linear Gradients(线性渐变)与Radial Gradients(径向渐变)的基本概念, 介绍了两种渐变的常用属性,最后结合了Linear Gradients实例介绍了CSS3渐变在实际中的部分应用场景。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ASP.NET 2.0入门经典

ASP.NET 2.0入门经典

哈特 / 清华大学出版社 / 2006-8 / 78.00元

该书是Wrox红皮书中的畅销品种, 从初版、1.0版、1.1版到目前的2.0版,已经3次升级,不仅内容更加完善、实用,还展现了.NET 2.0的最新技术和ASP.NET 2.0最新编程知识,是各种初学者学习ASP.NET的优秀教程,也是Web开发人员了解ASP.NET 2.0新技术的优秀参考书。该书与《ASP.NET 2.0高级编程(第4版)》及其早期版本,曾影响到无数中国Web程序员。一起来看看 《ASP.NET 2.0入门经典》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具