CSS3 之 渐变

最新推荐文章于 2026-06-20 08:28:09 发布
转载 最新推荐文章于 2026-06-20 08:28:09 发布 · 368 阅读 · 0
标签
#css3

1.线性渐变

    .linear{
             background:#f1f1f1;
             background: -moz-linear-gradient(top, #f8f8f8 0%, #ddd 100%);/*firefox*/
             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ddd));/*old rules- safari,chrome*/
             background: -webkit-linear-gradient(top, #f8f8f8 0%,#ddd 100%);/*new rules- safari,chrome*/
             background: -o-linear-gradient(top, #f8f8f8 0%,#ddd 100%);/*opera*/
             background: -ms-linear-gradient(top, #f8f8f8 0%,#ddd 100%);/*ie*/
             background:filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f8f8f8, endColorstr=#e6e6e6);/*IE<9>*/
                    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f8f8f8, endColorstr=#e6e6e6)";/*IE8+*/
             background: linear-gradient(top, #f8f8f8 0%,#ddd 100%);
    }
       /*带有角度的渐变*/
    .deg0 { 
    background: -moz-linear-gradient(0deg, #ace, #f96);
    background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(0deg, #ace, #f96);
    background: -o-linear-gradient(0deg, #ace, #f96);
    }
    .deg45 { 
    background: -moz-linear-gradient(45deg, #ace, #f96);
    background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(45deg, #ace, #f96);
    background: -o-linear-gradient(45deg, #ace, #f96);
    }
    .deg90 {
    background: -moz-linear-gradient(90deg, #ace, #f96);
    background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(90deg, #ace, #f96);
    background: -o-linear-gradient(90deg, #ace, #f96);
    }
    .deg135 { 
    background: -moz-linear-gradient(135deg, #ace, #f96);
    background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
    background: -webkit-linear-gradient(135deg, #ace, #f96);
    background: -o-linear-gradient(135deg, #ace, #f96);
    }
    .deg180 { 
    background: -moz-linear-gradient(180deg, #ace, #f96);
    background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(180deg, #ace, #f96);
    background: -o-linear-gradient(180deg, #ace, #f96);
    }
    .deg225 {
    background: -moz-linear-gradient(225deg, #ace, #f96);
    background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(225deg, #ace, #f96);
    background: -o-linear-gradient(225deg, #ace, #f96);
    }
    .deg270 {
    background: -moz-linear-gradient(270deg, #ace, #f96);
    background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(270deg, #ace, #f96);
    background: -o-linear-gradient(270deg, #ace, #f96);
    }
    .deg315 {
    background: -moz-linear-gradient(315deg, #ace, #f96);
    background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(315deg, #ace, #f96);
    background: -o-linear-gradient(315deg, #ace, #f96);
    }
    .deg360 {
    background: -moz-linear-gradient(360deg, #ace, #f96);
    background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
    background: -webkit-linear-gradient(360deg, #ace, #f96);
    background: -o-linear-gradient(360deg, #ace, #f96);
    }
                }
    <!--html结构-->
    <div class="linear"></div>

2.径向渐变

除了您已经在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。 颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。下面为了更好的理解其具体的用法，我们主要通过不同的示例来对比CSS3径向渐变的具体用法（来源： http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html）

示例一：

    background: -moz-radial-gradient(#ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

示例二：

    background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
    background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

示例三：

    background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

示例四：

    background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

/* 示例三和示例四我们从效果中就可以看出，其形状不一样，示例三程圆形而示例四程椭圆形状，也是就是说他们存在形状上的差异。然而我们在回到两个示例的代码中，显然在示例三中设置其形状为 circle，而在示例四中 ellipse，换而言之在径向渐变中，我们是可以设置其形状的。*/

示例五：

    background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
    background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

示例六：

    background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
    background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);

/* 从示例五和示例六中的代码中我们可以清楚知道，在示例五中我人应用了closest-side而在示例六中我们应用了farthest-corner。这样我们可以知道在径向渐变中我们还可以为其设置大小(Size)：size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。 示例：椭圆的近边VS远角 下面的两个椭圆有不同的大小。示例五是由从起始点(center)到近边的距离设定的，而示例六是由从起始点到远角的的距离决定的。*/

3.重复渐变
如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient（重复线性渐变）和-moz-repeating-radial-gradient（重复径向渐变）。 在下面的例子，每个实例都指定了两个起止颜色，并无限重复。

    background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
    background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
    background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
    background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

4.渐变实例
HTML代码：

    <style>
        ul {
      overflow: hidden;
      margin-top: 20px;
    }
    li{
      width: 150px;
      height: 80px;
      margin-bottom: 10px;
      float: left;
      margin-right: 5px;
      background: #ace;
      /*Controls the size*/
      -webkit-background-size: 20px 20px;
      -moz-background-size: 20px 20px;
      background-size: 20px 20px;
    }

    li.gradient1 {
      background-image: -webkit-gradient( linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
      background-image: -moz-linear-gradient( 45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
      background-image: -o-linear-gradient( 45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
      background-image: linear-gradient( 45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, gba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    }

    li.gradient2 {
       background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
       background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
       background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
       background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }

    li.gradient3 {
      background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
      background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
      background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
      background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    }

    li.gradient4 {
      background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
      background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
      background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
      background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    }

    li.gradient5 {
      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
          -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
          -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
          -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
      background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
         -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
         -moz-linear-gradient(45deg, transparent 75%, #555 75%),
         -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
      background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
         -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
         -o-linear-gradient(45deg, transparent 75%, #555 75%),
         -o-linear-gradient(-45deg, transparent 75%, #555 75%);
      background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
    }

    li.gradient6 {
      background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
         -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
      background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
         -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
      background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
         -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
      background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
         linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    }
    </style>
    <ul>
       <li class="gradient gradient1"></li>
       <li class="gradient gradient2"></li>
       <li class="gradient gradient3"></li>
       <li class="gradient gradient4"></li>
       <li class="gradient gradient5"></li>
       <li class="gradient gradient6"></li>
    </ul>

效果图：
这里写图片描述

/来源： http://www.w3cplus.com/content/css3-gradient/

repeating-linear-gradient，来感受一下：
这里写图片描述

来源： https://gold.xitu.io/post/583e97c961ff4b006b662f5e

CSS3 渐变
qq_48763502的博客
09-05 1455
含义: 可以使用 x% y% 或 xpx ypx 来指定渐变的起始位置。效果: 渐变从自定义的具体位置开始。
3_CSS3 渐变 --[CSS3 进阶之路]
桃园码工的博客
01-13 1437
CSS3 引入了渐变（gradients），它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变：
设定背景图
qq_43715937的博客
04-02 735
设定背景图 今天给大家分享背景图的控制，对于刚入门的前端小白来说，背景的处理常常给人带人困扰，下面是我的一个大致总结。 实例 background-color: #F8F8F8; //背景颜色，此处使用RGB background-image: url(https://blog.csdn.net/images/41201.jpg); //背景图片，可使用相对路径以及绝对路径 background-size: cover; //背...
CSS3径向渐变radial-gradient 实现内倒角
alpha_xiao的博客
05-25 619
<div class="radial-gradient"></div> <style> body{ background-color: #F8F8F8; } .radial-gradient { width: 200px; height: 100px; position: relative; background-image: radial-gradient(circle at left bottom, #F8F8F8,#F8F8.
iOS 颜色拓展之 16进制字符串(f8f8f8) 转化为UIColor(Swift 4)
FlyingFireFish的博客
04-21 745
给UIColor添加拓展方法，通过"f8f8f8"获取对应的UIColor值：实际使用：let color = UIColor(hexColor: "f8f8f8")importFoundationimport UIKitextension UIColor {   convenienceinit(hexColor:String) {               varred:UInt32=0, g...
设计界面通用的颜色值
LuckyDucky的博客
09-01 1429
灰色系 常用灰色 #3f3f3f #aaa #666666 渐变色值 #FBFBFB #F8F8F8 #F4F4F4 #EEEEEE #E5E5E5 #DDDDDD #D0D0D0 #C0C0C0 #ADADAD #989898 #808080 #666666 #4B4B4B 彩色系 常用主题 \ #ffffcc #ccf...
在Twitter Bootstrap中更改导航栏颜色
asdfgh0077的博客
04-14 1万+
我将如何修改CSS来更改Twitter Bootstrap中导航栏的颜色？
css3渐变色
热门推荐
fine1998_的博客
05-09 3万+
作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类：分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction属性值： to bottom 默认值，从上到下 to top 从左到右 to left
CSS3渐变属性
葉無聞
05-28 1万+
渐变可以使得元素背景更加有灵性并具有生气，虽然我们可以使用背景图片来呈现渐变效果，但却是不够灵活，当想要改变颜色时需要使用图片编辑器重新编辑，而渐变则可以在代码中直接改变颜色就可以了。CSS3提供了两种渐变方式，分别是线性渐变（linear-gradient）和径向渐变（radial-0gradien）。 一、线性渐变（linear-gradient） 线性渐变就是沿着某个方向进行颜色上...
CSS3——渐变（线性渐变、径向渐变、重复性渐变）
weixin_45249263的博客
01-21 9200
CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
uni-app开发中遇到的问题（持续更新...）
Serena_tz的博客
05-24 3773
去掉顶部导航栏 在pages.json里面进行配置： 去掉所有页面的顶部导航栏 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" "navigationStyle":"custom", "app-plus":{ "title
常用背景色RGB值
skye_95的博客
08-18 1万+
1.#ececec 2.#F1F1F1 3.#ddd 4.#eee 5.#f8f8f8 6.#e4e4e4 7.#e5e5e5 8.#ccc 9.#666 10.背景色对比图 11.边框色对比图
微信小程序“反编译”实战（二）：源码还原
weixin_34033624的博客
07-27 4027
在上一篇文章《微信小程序“反编译”实战（一）：解包》中，我们详细介绍了如何获取某一个小程序的 .wxapkg 包，以及分析了 .wxapkg 包的结构，最后通过脚本解压获取包中的文件：小程序“编译”后的代码文件和资源文件，但是由于这些文件大部分被混淆了，可读性很差，所以本文将进一步分析，尽可能地把 .wxapkg 包的内容还原为“编译”前的内容。 注：本文包含一部分源码分析，由于手机...
java 常用代码
lwq597的博客
09-29 1万+
Java常用代码
十六进制颜色码深浅记录
qq_43437571的博客
10-26 1404
个人在微调时候，有时并没有UI给图，只能自己找颜色，黑色深浅对比个人一些小总结如下，首先仍是示例： 代码如下： <div class="div1"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5">&lt
html背景左右渐变,css 背景 上下渐变 左右渐变
weixin_36081148的博客
06-24 2975
css 背景 上下渐变 左右渐变上下渐变.top{background-color:#d2d2d2;background-image:-webkit-gradient(linear,00,0100%,from(#f8f8f8),to(#c2c2c2));background-image:-moz-linear-gradient(#f8f8f8,#c2c2c2);backgro...
vue实现三角抽象思维计算矩形面积
最新发布
cf8833的博客
06-20 243
这篇文章摘要： Vue组件实现了一个可交互的直角三角形与内嵌矩形绘图工具。用户可通过控件调整直角三角形的两条直角边长度(AB和AC)以及内嵌矩形的宽度和高度比例。组件实时计算并显示三角形面积、矩形面积及其占比、斜边长度等几何数据。绘图功能使用Canvas API实现，包含网格背景、三角形和矩形的绘制、顶点标注和尺寸标注。关键特性包括：响应式数据绑定、实时图形更新、面积计算和百分比显示。当矩形顶点F位于斜边BC上时，满足宽度比例+高度比例=1的关系。
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 749
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值