资讯专栏INFORMATION COLUMN

css3 渐变

FrozenMap / 3292人阅读

摘要:渐变渐变分为两种渐变,一种是线性渐变,一种是径向渐变线性渐变线性渐变为向上,向下,向左,向右两种渐变方式。线性渐变由一个轴即梯度线构成。

css3
ps: css越来越真正的像一门语言了,css已经有变量了,刚刚看到文档中。一个实验性质的功能。

渐变

渐变分为两种渐变,一种是线性渐变,一种是径向渐变

线性渐变

线性渐变为向上,向下,向左,向右两种渐变方式。

linear-gradient()函数

此为css的一个函数。线性渐变由一个轴即梯度线构成。其上的每个点具有两种或多种颜色。其轴上的每个点具有独立的颜色。为了构建出平滑的渐变,该函数还会构建一系列的着色线。每一条着色线的颜色还会取决于与之垂直相交的渐变线上的色点。

// 渐变轴45度,重蓝色到红色
linear-gradient(45deg, blue, red);

// 从右下到左上,蓝色渐变到红色
linear-gradient(to left top, blue, red);

// 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 
linear-gradient(0deg, blue, green 40%, red);
ps 透明度为rgba的最后一个参数
径向渐变

径向渐变由其中心点,边缘形状,轮廓,及其位置,和色值结束点组成。
径向渐变由椭圆不断的组成

第一个参数

第一个参数一般都可省,

closest-side

closest-corner

closest-side

farthest-corner

circle at 百分比

分开写

百分号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113675.html

相关文章

  • 浅探css3渐变

    摘要:基本用法想要知道线性渐变有什么用,当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向,第二个参数是截止颜色的值,要想产生渐变的效果,当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用,在没有css3的渐变属性之前,要实现一些多种颜色切换的效果图,你可能别无他法,只能用一个图片来显示,虽然你知道使用图片需要...

    lieeps 评论0 收藏0
  • CSS3渐变效果工具

    摘要:推荐一个渐变效果工具,觉得有帮助的可以收藏下。工具链接渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 推荐一个css3渐变效果工具,觉得有帮助的可以收藏下。 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/...

    toddmark 评论0 收藏0
  • CSS3-线性渐变

    摘要:兼容性见参考二线性渐变渐变线通过函数可以创建线性渐变图片。线性渐变是通过一个轴定义的,这个轴称为渐变线。等价等价等价等价等价等价等价等价并且和直接距离为,不会渐变,如下图参考线性渐变 一、渐变(gradient) 1.1 关于渐变 渐变表示从一种颜色平滑的过度到另一种颜色。它是图片类型的一种,但是渐变类型图片没有尺寸,也没有长宽比。它的尺寸取决于被应用的场景,比如作为元素的背景图片时,...

    piglei 评论0 收藏0
  • CSS3 线性渐变应用

    摘要:分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向,是从上到下是从左到右,如果定义成,那就是从左上角到右下角。 CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是通过一个小例子来针...

    Snailclimb 评论0 收藏0
  • css3学习系列】之box-shadow,radial-gradient,linear-gradi

    摘要:不在指定渐变区域的,以距离其最近的颜色填充。设置渐变为从右到左。这是默认值,等同于留空不写。最后奉上一碗纯拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

    LdhAndroid 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<