css3渐变色

最新推荐文章于 2024-04-24 10:32:12 发布
最新推荐文章于 2024-04-24 10:32:12 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atu1111/article/details/119105988
版权

css3渐变色

  CSS3 定义了两种类型的渐变：

    线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

    径向渐变（Radial Gradients）- 由它们的中心定义

1.线性渐变
语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明：

direction：默认为to bottom，即从上向下的渐变；

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
1.1 单一方向渐变
	left 		从左边开始
	right		从右边开始
	top			从上边开始
	bottom   	从底部开始
	注意: 需要添加兼容前缀

	to left 到左边(结束位置)
	to right 到右边
	to top	到顶部
	to bottom 到底部
	注意: 不要添加兼容前缀

  代码如下：

  <style>
    .box1 {
      width: 800px;
      height: 200px;
      background: linear-gradient(red, blue);
    }
    .box2 {
      width: 800px;
      height: 200px;
      background:  -webkit-linear-gradient(left, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box3 {
      width: 800px;
      height: 200px;
      background: linear-gradient(to left, red, blue);
    }
  </style>


  <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>

  效果如下：
在这里插入图片描述

1.2 对角渐变
	left top	左上开始
	left bottom 左下开始
	right top	右上开始
	注意: 带兼容前缀
			
	to left top 到左上(结束位置)
	注意: 不带兼容前缀

  代码如下：

  <style>

   .box1 {
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(left, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }

    .box2 {
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(left top, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }

    .box3 {
      width: 800px;
      height: 600px;
      background: linear-gradient(to left top, red, blue);
    }
  </style>

 <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>

  效果如下：
在这里插入图片描述

1.3 角度的渐变

  语法：

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

在这里插入图片描述
  代码如下：

  <style>
    .box1 {
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(0deg, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }

   .box2{
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(45deg, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }

    .box3 {
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(90deg, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }

    .box4 {
      width: 800px;
      height: 600px;
      background:  -webkit-linear-gradient(left, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }


  </style>

  <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>
  <br>
  <div class="box4">

  </div>
  <br>

  效果如下：
在这里插入图片描述

1.4 默认情况下颜色趋于均分

  可以指定颜色分布的百分比,让颜色按照百分比进行渐变

  代码如下：

   <style>
    .box1 {
      width: 800px;
      height: 200px;
      background: -webkit-linear-gradient(left, red, blue);
    }
    .box2 {
      width: 800px;
      height: 200px;
      background:  -webkit-linear-gradient(left, red 50%, blue 50%);
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box3 {
      width: 800px;
      height: 200px;
      background:  -webkit-linear-gradient(left, red 50%, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
  </style>
  

  <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>

  效果如下：
在这里插入图片描述

2. 径向渐变

  径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法：

background: radial-gradient(center, shape, size, start-color, ..., last-color);
     
说明：

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
2. 1 渐变位置
默认从中心到四周

	left	从左边到四周的渐变
	right
	top
	bottom
				
	left top	从左上角到四周的渐变
	left bottom	
	right top
	...
				
	10px 30px	距离左边10px 距离上边30px

  代码如下：

  <style>
    .box1 {
      width: 400px;
      height: 400px;
      background: -webkit-radial-gradient(center, circle, red, blue);
    }
    .box2 {
      width: 400px;
      height: 400px;
      background: -webkit-radial-gradient(left, circle, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box3 {
      width: 400px;
      height: 400px;
      background: -webkit-radial-gradient(left top, circle, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
  </style>

 <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>

  效果如下：
在这里插入图片描述

2. 2 形状
默认椭圆	ellipse
	正圆		circle
	注意: 元素是正方形,则都是正圆

  代码如下：

  <style>
    .box1 {
      width: 400px;
      height: 400px;
      background: -webkit-radial-gradient(center, red, blue);
    }
    .box2 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(center, circle, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box3 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(center, ellipse, red, blue);
      /* 需加上-webkit-前缀不然没有效果 */
    }
  </style>


  <div class="box1">

  </div>
  <br>
  <div class="box2">

  </div>
  <br>
  <div class="box3">

  </div>

  效果如下：
在这里插入图片描述

2. 3 大小
size：渐变的大小，即渐变到哪里停止，它有四个值。 
		closest-side：最近边； 
		farthest-side：最远边； 
		closest-corner：最近角； 
		farthest-corner：最远角。

  代码如下：

  <style>
    .box1 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(60% 40%, closest-side, blue, green, yellow, black);
    }
    .box2 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(60% 40%, farthest-side, blue, green, yellow, black);
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box3 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(60% 40%, closest-corner, blue, green, yellow, black);;
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box4 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black);;
      /* 需加上-webkit-前缀不然没有效果 */
    }
    .box5 {
      width: 800px;
      height: 400px;
      background: -webkit-radial-gradient(60% 40%, blue, green, yellow, black);
      /* 需加上-webkit-前缀不然没有效果 */
    }
  </style>

  效果如下：
在这里插入图片描述

3.重复性渐变
3.1 重复性线性渐变

  代码如下：

    .box1 {
      width: 800px;
      height: 400px;
      background: repeating-linear-gradient(red, blue 10%);;
    }

  效果如下：
在这里插入图片描述

3.2

  代码如下：

    .box1 {
      width: 800px;
      height: 400px;
      background:  repeating-radial-gradient(red, blue 10%);;
    }

  效果如下：
在这里插入图片描述

闲人不梦卿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3渐变色雪花粒子掉落特效
07-24
【CSS3渐变色雪花粒子掉落特效】是一种利用CSS3技术实现的动态视觉效果，它在网页背景上创建出一种仿佛雪花飘落的场景。这种特效不仅为网站增添了一种冬季或节日氛围，还能作为创意设计元素提升用户体验。在这款特效...
Css3渐变色的使用
wan123456789789的博客
07-28 1094
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS渐变色理论与分类、文字渐变色方案、炸裂渐变色方案以及主流专业渐变色工具网站推荐
最新发布
JINGWHALE
04-24 1748
本文介绍了CSS渐变的理论与分类、文字渐变色方案、炸裂渐变方案以及主流的专业渐变色工具网站。渐变色彩可以增加视觉层次感和动态效果，使网页界面更加生动有趣，吸引用户注意力。另外，相较于静态背景图片，CSS渐变无需额外的HTTP请求，减轻服务器负载，加快页面加载速度；同时CSS渐变能够根据容器尺寸自动调整，适用于不同屏幕尺寸及分辨率设备，保持良好的自适应性。
CSS3渐变
weixin_52629158的博客
04-09 735
颜色节点即你想要呈现平稳过渡的颜色。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。farthest-corner (最远的角落)，closest-corner (最近的角)，farthest-side (最远的端)，closest-side (最近端)。注意：我们在使用渐变背景设置的使用，需要在 渐变的前面添加 浏览器的内核标识码 -webkit- , -o-, -moz-, -ms-
CSS3颜色渐变
10-06 728
CSS3 渐变，渐变是两种或多种颜色之间的平滑过渡。 1. CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photosho...
css3渐变用法（全网最全最好用的知识总结）
xu2034029667的博客
07-11 1568
背景:深感自己做的页面，就是不太好看，看到太多网站做到非常漂亮，都用到过渡，等css3的知识，还有布局也用到flex弹性分配布局方式，即好看又考虑移动端， 除此之外，还有一个真正重要的理由，css样式里面完成各种，以前需要借助脚本，图片完成效果，减少对服务器的请求次数，总之，css3越来越像一门真正的语言，已经有类似变量的东西，感觉真到了非认真学不可的地步。 第一部分：线性渐变 线性...
CSS3渐变色雪花粒子掉落特效.zip
10-08
【CSS3渐变色雪花粒子掉落特效】是一个利用现代CSS3技术实现的视觉效果，它在网页上模拟出雪花从天空缓缓飘落的情景，并且这些雪花的颜色可以根据预设的渐变进行变化，为网站增添一种动态且唯美的氛围。这个特效不仅...
css设置边框渐变色
10-22
使用css设置按钮边框的渐变色；使用css设置按钮边框的渐变色
CSS3渐变、过渡
2301_79002342的博客
07-08 1025
此外，渐变效果的元素在放大时看起来效果更好，因为渐变 (gradient) 是由浏览器生成的。closest-side: 最近边 、farthest-side: 最远边:、closest-corner: 最近角、 farthest-corner: 最远角。径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。以中心 (50% 50%) 为起点，到最远角 (farthest-corner) ，从red到green、blue的均匀渐变。
6种CSS3平滑过渡的渐变背景颜色
12-13
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。
CSS3颜色值RGBA与渐变色使用介绍
11-21
CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果 颜色值RGBA 我们熟悉的rgb颜色标准，是由r（red）、g（green）、b（blue）三种颜色叠加变化形成各种颜色 取值0~255，或0~100% rgba就是在rgb基础上增加了alpha不透明度参数   例子1、正常的红色rgb颜色 .demo { width: 100px; height: 100px; background-color: rgb(255, 0, 0); } 例子2、使用rgba 红色半透明效果 .demo {
CSS3下的渐变文字效果实现示例
09-24
主要介绍了CSS3下的渐变文字效果实现示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【CSS3】渐变、过渡和动画用法
qq_45677671的博客
12-30 3166
css 渐变、过渡、动画属性解析及使用方法和案例
css3渐变属性有哪些?css3渐变属性用法详解
zy1992As的博客
01-12 1418
在CSS3之前如果需要添加渐变效果，通常要设置背景图像来实现。而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变和径向渐变，下面我们详细介绍。在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image: linear-gradient（参数值）;”样式可以实现线性渐变效果，其基本语法格式如下。
css3 渐变
似水流年QC的博客
05-13 1730
css3 渐变
css3渐变
Changkaix的博客
04-05 302
1.渐变色 线性渐变：Linear gradients linear-gradient ( position, color1, color2,…) position表示方向 background: linear-gradient(to right，red,green,yellow) 从左到右渐变为红 绿 黄 效果： background: linear-gradient(to bottom， right，red,green,yellow) 最后延伸到右下，那就是从左上角到右下角渐变为红 ..
css3如何写渐变色
angelnotears的博客
07-08 1003
用css3实现图片中的背景色,主义背景色的渐变规定了角度渐变，所以会出现如图的效果，百分比则提现在渐变在整个图片的什么比例出现这种情况 //css .leve-header{border-radius:10rpx;background:linear-gradient(120deg,#FFD489 0,#DEB36F 50%,#EBBC53 40%);width:calc(100% - 40rpx);height:280rpx; border-radius:20rpx 20rpx; } //html
ie不兼容css3 渐变色,CSS3兼容IE、Safari、Firefox背景颜色渐变
05-25
是的，IE浏览器不支持CSS3中的渐变色，但可以使用IE滤镜来实现类似的效果。以下是一个使用CSS3和IE滤镜来实现渐变色的示例： ```css /* CSS3 */ background: linear-gradient(to bottom, #ff0000, #0000ff); /* IE滤镜 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=0); ``` 这里使用了CSS3中的线性渐变，从红色渐变到蓝色。同时，使用IE滤镜来实现相同的效果，其中 `startColorstr` 和 `endColorstr` 分别指定起始和结束颜色，`GradientType` 指定渐变类型为0（表示水平渐变）。这样就能在IE浏览器中实现类似的效果了。另外，Safari和Firefox等现代浏览器都支持CSS3中的渐变色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值