CSS3_线性渐变_径向渐变----背景

渐变的本质：绘制一张背景图片，所以使用 background 或者 background-image

background 的诸多属性，渐变都是可以使用的（repeat，position）

百分比：把元素渐变方向的整体长度看成 100%

线性渐变背景

使用：（至少三个参数，从第二个参数开始，都是颜色）
background-image: linear-gradient( 方向开始颜色结束颜色);

方向

默认值（从上到下）

background-image: linear-gradient(#000, #fff);

to right 到右

background-image: linear-gradient(to right, #000, #fff);
background-image: linear-gradient(to left, #000, #fff);
background-image: linear-gradient(to top, #000, #fff);
background-image: linear-gradient(to bottom, #000, #fff);

to right bottom 到右下角

background-image: linear-gradient(to right bottom, #000, #fff);
background-image: linear-gradient(to right top, #000, #fff);
background-image: linear-gradient(to left top, #000, #fff);
background-image: linear-gradient(to left bottom, #000, #fff);

角度 deg

background-image: linear-gradient(0deg, #000, #fff);
background-image: linear-gradient(90deg, #000, #fff);
background-image: linear-gradient(180deg, #000, #fff);
background-image: linear-gradient(270deg, #000, #fff);background-image: linear-gradient(45deg, #000, #fff);
background-image: linear-gradient(135deg, #000, #fff);
background-image: linear-gradient(225deg, #000, #fff);
background-image: linear-gradient(315deg, #000, #fff);background-image: linear-gradient(-45deg #000, #fff);
background-image: linear-gradient(-90deg #000, #fff);

颜色结点

background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%);/*
从 0% 到 10% 为 red
从 10% 到 20% 为 red 到 green 的渐变
从 20% 到 30% 为 green 到 blue 的渐变
从 30% 到 40% 为 blue 到 yellow 的渐变
从 40% 到 100% 为 yellow 最后一个颜色百分比不写，默认到 100%
第一个颜色百分比不写，默认 0%
*/

应用： 45 度红白格（马赛克地砖）
明确的颜色分割线（red 25%, white 25%）
多重渐变背景，以逗号隔开，适当位置设置透明颜色
- 123

重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);

颜色结点，除了可以写百分值，还可以写一个具体的像素值。写像素值，必须写两个值：起始和结束。
- ```
background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px;    // 发廊灯
```

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">body {width: 100%;color: #000;background: #96b377;font: 14px Helvetica, Arial, sans-serif;}#outer_box {width: 100px;height: 300px;margin: 300px auto 0;overflow: hidden}#inner_box {width: 100px;height: 3000px;margin-top: -900px;background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);}#inner_box:hover {margin-top: 0px;transition: 9s;}</style></head><body><div id="outer_box"><div id="inner_box"></div></div></body>
</html>

文字光斑动画
文字要设置透明 color: rgba(255, 255, 255, 0.3);
3

径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);

从起点到终点，颜色从内向外渐变。

形状尺寸 参数
circle 默认形状，圆形
当 width 相等 height 时，总是圆形
当 width ！= height 时，是椭圆

颜色结点
百分比，参照圆心到最远端的距离

尺寸大小
- closest-side circle 最近边
- farthest-side circle 最远边
- closest-corner 最近角
- farthest-corner 最远角

at 设置圆心
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);

重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);
- background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);

转载于:https://www.cnblogs.com/tianxiaxuange/p/9938861.html

CSS3_线性渐变_径向渐变----背景相关推荐

AndroidStudio安卓原生开发_UI高级_Shape的使用_虚线_直线_矩形_渐变_径向渐变_线性渐变_扫描渐变---Android原生开发工作笔记122
然后我们再来看一下android中的shape怎么用,可以看到上面就是用shape做出来的效果. 用来做按钮的背景,等. 这个就是用了扫描线渐变. 上面是,对shape做了一些的,介绍和解释,我们一 ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
渐变：线性渐变、径向渐变
渐变: CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 分为线性渐变(linear-gradient).径向渐变(radial-gradient) 线性渐变(l ...
CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变如需创建线性渐 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）
1 linear-gradient(线性渐变) 1.1按方向渐变语法: background: linear-gradient(direction, color-stop1, color-stop2 ...
CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。
CSS3中的渐变实现(线性渐变.径向渐变) CSS3中的background新增属性实现,常见页面效果. CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果. CSS3 ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...

CSS3_线性渐变_径向渐变----背景

CSS3_线性渐变_径向渐变----背景相关推荐

最新文章

热门文章