CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。

CSS3中的渐变实现（线性渐变、径向渐变）
CSS3中的background新增属性实现，常见页面效果。
CSS3中的图片边框的基本用法
CSS3中的transition属性，实现过渡效果。
CSS3中的transfrom属性，实现 2d变换效果。

渐变：是css3中比较丰富多彩的一个特性，通过渐变可以实现许多绚丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可拓展性。可分为线性渐变、径向渐变。
1.linear-gradient 线性渐变，指沿着某条直线朝一个方向产生渐变效果。
语法：linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>*])
   第一个参数表示线性渐变的方向，
   1-to left:设置渐变为从右到左。相当于270deg
   2-to right:设置渐变从左到右。相当于90deg。
   3-to top:设置渐变从上到下，相当于0deg。
   4-to buttom:设置渐变从下到上，相当于180deg。这是默认值，也可以直接指定度数，如45度。
   第二个参数，是起点颜色，可以指定颜色的位置。
   第三个参数是重点颜色，捏还可以在后面添加更多的参数，表示多种颜色渐变。

2.radial-gradient: 径向渐变指从一个中心店开始沿着四周产生渐变效果。
语法：<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+);
   1- <position>确定圆心的位置，提供2个参数，第一个表示横坐标，第二个表示纵坐标；
   如果只提供一个，第二个默认为50%，即center。
   2- shape：渐变的形状，ellipse表示椭圆，circle表示园型。默认ellipse，
   如果元素形状是正方形的元素，则ellipse和circle显示一样。
   如果宽高不一样，默认效果切换到ellipse。
   3- size：渐变的大小，即渐变从哪里到哪里停止，它有4个值。
   colsest-side:最近边
   farthest-side:最远边
   closet-corner:最近角
   farthest-corner:最远角，默认值。
   4- <color>指定颜色额，rgba或hsla

3. 重复渐变
   repeating-radial-gradient
   repeating-linear-gradient

===============================================

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>渐变效果：线性变化（渐变色）</title><style type="text/css">#div01 {width: 200px;height: 100px;/* 添加渐变，渐变不是单一色，产生的是一个图像，所以需要background添加。 *//* linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...) *//* background: linear-gradient(to right, red, blue ); *//* 设置百分比，左边一个颜色，右边一个颜色 */background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);}#div02 {width: 100px;height: 100px;margin-top: 10px;/* 语法：radial-gradient(形状 大小 坐标 );形状shape：circle产生正方形的渐变色；ellipse适配当前的形状。如果是正方形的容器，两者效果一样at position:坐标，默认在正中心，可以赋值坐标(相对于左上角)，也可以赋值关键字（left/center/right/top/bottom）大小size：colsest-side:最近边farthest-side:最远边closet-corner:最近角farthest-corner:最远角，默认值。*//* background: radial-gradient(red, blue); *//* background: radial-gradient(circle closest-corner at 50px 50px ,red, blue); *//* background: radial-gradient(at left top, red, blue); */background: radial-gradient(red, red 50%, blue 50%, blue 100%);}/* 重复渐变1 */#div03 {width: 300px;height: 300px;margin-top: 10px;/* background: radial-gradient(#fff 0%, #fff 10%,#000 10%, #000 20%,#fff 20%, #fff 30%,#000 30%, #000 40%,#fff 40%, #fff 50%,#000 50%, #000 60%,#fff 60%, #fff 70%,#000 70%, #000 80%,#fff 80%, #fff 90%,#000 90%, #000 100%); */background: repeating-radial-gradient(circle closest-side at center center,#fff 0%, #fff 10%,#000 10%, #000 20%);}/* 重复渐变2 */#div04 {width: 200px;height: 200px;margin-top: 10px;background: repeating-linear-gradient(45deg,#fff 0%, #fff 10%,#000 10%, #000 20%);}</style></head><body><div id="div01"></div><div id="div02"></div><div id="div03"></div><div id="div04"></div></body>
</html>

CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。相关推荐

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
html中css3渐变效果,CSS3 渐变
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是 ba ...
CSS3学习，常用常记（渐变）
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和 ...
在html中如何写图片渐变,如何通过CSS3实现背景图片色彩的梯度渐变_html/css_WEB-ITnose...
随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验. 通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言 ...
Css3之基础-5 Css 背景、渐变属性
一.CSS 背景概述背景属性的作用 - 背景样式可以控制 HTML 元素的背景颜色.背景图像等 - 背景色 - 设置单一的颜色作为背景 - 背景图像 - 以图片作为背景 - 可以设置图像的位置.平铺 ...
HTML渐变背景不重复,如何停止重复自身的背景颜色渐变？（css）
我真的不知道如何解决背景渐变不会重复的问题.我做了很多研究,但大部分都没有帮助.我真的需要它,因为这是为了我的论文,所以我非常感谢他的帮助.预先感谢.如何停止重复自身的背景颜色渐变? (css) @i ...
html阴影渐变,CSS 阴影轮廓渐变详解
阴影 box-shadow: h-shadow v-shadow blur spread color inset; text-shadow: h-shadow v-shadow blur color; ...

CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。

CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。相关推荐

最新文章

热门文章