css3 渐变

渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.

线性渐变(linear-gradient)

下面几个属性分开介绍

渐变方向

默认的渐变方向:从上到下 可以采用角度的方式指定方向:如 默认方向(从上到下),也即180deg方向 html :

1

<div></div>

css:

12345

div { height: 100px; width: 200px; background-image: linear-gradient(red, blue);}

45度方向(左下到右上) html :

1

<div></div>

css:

12345

div { height: 100px; width: 200px; background-image: linear-gradient(45deg, red, blue);}

按照下图,

以此类推: 0deg : 从 45deg: 从 左下 右上 90deg: 从 135deg: 从 左上 右下 180deg: 从 270(-90)deg: 从 … 表示方向还有另外一种方式, 例如将”45deg”换成”to right top” ,或者换成”left bottom”,都表示一样的效果,个人习惯使用角度,其他不演示了.

渐变颜色

写在前面的是初始颜色,写在后面的是结束颜色;就像我们以上例子中所写的. 我们可以使用rgb,rgba,十六进制或者像以上例子中语义化的颜色值来表示渐变颜色; 如果需要用到透明度,需要使用rgba

渐变位置

html :

1

<div></div>

css:

12345

div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red 20%, blue 80%);}

这个渐变位置也就是我们颜色值后面的百分比,这一点不常用,很多人容易把它搞混. 拿上例来说, 20%表示在渐变这条线上,从渐变长度的20%处开始渐变,20%之前的都是纯red色; 80%表示,到渐变长度的80%处停止渐变,80%之后的都是纯blue色; 也就是说,渐变区间是渐变这条线上,20%-80%这一区间; 默认的渐变区间是0%-100%.

重复线性渐变

repeat-linear-gradient函数用于创建重复的线性渐变 html :

1

<div></div>

css:

12345

div { height: 100px; width: 200px; background: repeating-linear-gradient(90deg, red 10%, blue 20%);}

径向渐变(radial-gradient)

径向渐变是由中心向外渐变的。可以控制它的中心(默认渐变是中心是center),形状(圆形或者椭圆形),大小,以及上面讲到的渐变范围等。 html :

1

<div></div>

css:

12345

div { height: 100px; width: 200px; background: radial-gradient(red 20%, blue 80%);}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

图像处理中任意核卷积(matlab中conv2函数)的快速实现。

     卷积其实是图像处理中最基本的操作,我们常见的一些算法比如:均值模糊、高斯模糊、锐化、Sobel、拉普拉斯、prewitt边缘检测等等一些和领域相关的算...

1.1K80
来自专栏null的专栏

机器学习算法实现解析——word2vec源码解析

在阅读本文之前,建议首先阅读“简单易学的机器学习算法——word2vec的算法原理”(目前还没发布),掌握如下的几个概念: 什么是统计语言模型 神经概率语言模型...

75670
来自专栏AI研习社

在 TensorFlow 里构建神经网络来可视化高维数据

在诸如自然语言处理、推荐系统构建等深度学习研究的许多方面,词汇嵌入和高维数据无处不在。谷歌最近开源了 embedding project 项目,此项目是一个交...

15330
来自专栏码云1024

a-start寻路算法

在英雄联盟之中,当你和你的队友都苦苦修炼到十八级的时候,仍然与敌方阵营不分胜负,就在你刚买好装备已经神装的时候,你看见信息框中一条队友的消息:“大龙集合”,这个...

39520
来自专栏机器学习实践二三事

sklearn中的nearest neighbor

KNN介绍 基础原理没什么介绍的,可以参考我的KNN原理和实现,里面介绍了KNN的原理同时使用KNN来进行mnist分类 KNN in sklearn skle...

24970
来自专栏机器学习和数学

[编程经验] SciPy之图像处理小结

Python中可以处理图像的module有很多个,比如Opencv,Matplotlib, Numpy, PIL以及今天要分享的SciPy。其他几个后续都会总结...

93370
来自专栏技术随笔

[RNN] Simple LSTM代码实现 & BPTT理论推导

52640
来自专栏风口上的猪的文章

机器学习(2) - KNN识别MNIST

 https://github.com/s055523/MNISTTensorFlowSharp

23220
来自专栏xingoo, 一个梦想做发明家的程序员

Spark MLlib中的OneHot哑变量实践

在机器学习中,线性回归和逻辑回归算是最基础入门的算法,很多书籍都把他们作为第一个入门算法进行介绍。除了本身的公式之外,逻辑回归和线性回归还有一些必须要了解的内...

379100
来自专栏IT派

用DaPy进行机器学习

DaPy自带了少量著名的数据集,比如用于分类问题的红酒分类和鸢尾花数据集。 接下来,我们首先启动一个Python Shell并加载作为例子的红酒数据集:

11730

扫码关注云+社区

领取腾讯云代金券