css3 渐变
来源:互联网 发布:什么叫网络编程 编辑:程序博客网 时间:2024/05/21 07:14
渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.
线性渐变(linear-gradient)
下面几个属性分开介绍
渐变方向
默认的渐变方向:从上到下
可以采用角度的方式指定方向:如
默认方向(从上到下),也即180deg方向
html :
<div></div>
css:
div { height: 100px; width: 200px; background-image: linear-gradient(red, blue);}
45度方向(左下到右上)
html :
<div></div>
css:
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 :
<div></div>
css:
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 :
<div></div>
css:
div { height: 100px; width: 200px; background: repeating-linear-gradient(90deg, red 10%, blue 20%);}
径向渐变(radial-gradient)
径向渐变是由中心向外渐变的。可以控制它的中心(默认渐变是中心是center),形状(圆形或者椭圆形),大小,以及上面讲到的渐变范围等。
html :
<div></div>
css:
div { height: 100px; width: 200px; background: radial-gradient(red 20%, blue 80%);}
- css3 渐变
- css3渐变
- CSS3渐变
- CSS3渐变
- css3渐变
- css3-渐变
- css3渐变
- css3渐变
- css3-渐变
- CSS3--渐变
- css3 渐变
- CSS3-渐变
- css3 渐变
- CSS3 渐变
- CSS3渐变
- css3渐变SVG渐变
- CSS3 渐变 线性渐变
- CSS3-颜色渐变--线性渐变+径向渐变
- 直方图处理
- 338. Counting Bits
- 简述PHP语言
- PS
- opencv双阈值化
- css3 渐变
- opencv自适应阈值
- opencv固定化阈值
- 数据库优化之sql优化
- 基础课程第一讲0530
- linux shell 判断空字符串的几种方法!
- WebView 重定向行为导致的多次加载问题
- 【线性规划与网络流】飞行员配对方案问题
- (李兴华)【FANUC FOCAS1/2 Library 开发系列教程】-开发包概述