【CSS】线性渐变、径向渐变

文章目录

线性渐变

线性渐变

语法background-image：linear-gradient（方向，颜色1，颜色2…）

水平竖直方向默认从上到下
- to left 去到左边从右往左
  - to right去到右边从左往右
  - to top去到上边从下往上
  - to bottom默认
对角线方向
- to left top
- to right top
  - to left top
  - to left bottom
角度写法

渐变突变
background-iamge：linear-gradient（）；
两段颜色写在同一个位置

<style>div {width: 400px;height: 500px;border: 1px solid #000;margin: 50px;/* 方向默认为从上到下 */background-image: linear-gradient(red, blue);/* 颜色可以写多个 */background-image: linear-gradient(red, blue, green);/* 方向的写法 *//* 01.上下左右 *//* 去到左边 从右到左 */background-image: linear-gradient(to left, red, blue);background-image: linear-gradient(to right, red, blue);background-image: linear-gradient(to top, red, blue);/* 默认 */background-image: linear-gradient(to bottom, red, blue);/* 02.对角线 *//* 去到右上角 从左下角到右上角 */background-image: linear-gradient(to right top, red, blue);/* 顺序可以互换 */background-image: linear-gradient(to top right, red, blue);/* 03.角度 *//* 正值增加是顺时针  负值增加是逆时针 *//* 180deg是默认值 从上到下 *//* 0deg是从下到上 */background-image: linear-gradient(0deg, red, blue);/* 渐变突变 *//* 70%到75%之间只有5%的渐变区域 */background-image: linear-gradient(red 70%, blue 75%);/* 70%到70%之间只在一根线上渐变，只要渐变区域够小，可以忽略不计，得到纯色色块，也叫突变*/background-image: linear-gradient(red 70%, blue 70%);/* 红黄蓝 */background-image: linear-gradient(red 33.3%, yellow 33.3%, yellow 66.6%, blue 66.6%);}
</style>

径向渐变
background-iamge：radial-gradient（方向，颜色……）；

shape 渐变的形状
- 默认椭圆形
- 圆形 circle

at position 渐变中心点的位置方向

水平和垂直方向的值
- 数值
- 百分比参考元素的高度的百分比
- 水平方位词 left right center
- 垂直方位词 top bottom center
如果位置只有方位词，顺序可以换
如果只写一个值，默认另一个值是center

<style>div {width: 500px;height: 300px;border: 1px solid #000;margin: 50px;/* 默认是椭圆形 */background-image: radial-gradient(red, blue);/* 渐变的形状--可以设置为圆形 */background-image: radial-gradient(circle, red, blue);/* at position 渐变中心点的位置*//* 方向01+02+03 *//* 01.数值 *//* 数值的坐标系:元素左上角为原点，向右是正值，向左是负值，向上是负值，向下是正值 */background-image: radial-gradient(circle at 400px 300px, red, blue);background-image: radial-gradient(circle at 500px -30px, red, blue);/* 02.百分比 *//* 参考元素的宽高 */background-image: radial-gradient(circle at 100% 100%, red, blue);/* 03.方位词 *//* left right center *//* top bottom center */background-image: radial-gradient(circle at right top, red, blue);/* 如果位置只有方位词 顺序可以换 */background-image: radial-gradient(circle at top right, red, blue);/* 方向是可以混搭的 */background-image: radial-gradient(circle at 10px bottom, red, blue);/* 如果只写一个值，默认另外一个方向是center */background-image: radial-gradient(circle at bottom, red, blue);}
</style>

重复线性渐变

语法: background-image: repeating-linear-gradient(red 5%,blue 20%);

颜色必须是加数值或者百分比

<style>.box1 {width: 300px;height: 400px;border: 1px solid #000;margin: 50px;background-image: repeating-linear-gradient(red 5%, blue 20%);}
</style>
<div class="box1"></div>

【CSS】线性渐变、径向渐变相关推荐

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
html css双色径向渐变,CSS 径向渐变
CSS 径向渐变 CSS 径向渐变 A radial gradient is defined by its center. To create a radial gradient you must a ...
html5 css3 渐变,CSS3 渐变 — 径向渐变
HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝 ...
html5绘制图形渐变-径向渐变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
深入理解CSS线性渐变linear-gradient
前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
css 渐变椭圆,CSS图形基础：利用径向渐变绘制图形
1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的"图像",其一般调用格式为: background-image: radial-gradient(sha ...

【CSS】线性渐变、径向渐变

文章目录

线性渐变

【CSS】线性渐变、径向渐变相关推荐

最新文章

热门文章