搜索
首页web前端html教程CSS3 径向渐变（radial-gradient）_html/css_WEB-ITnose

CSS3 径向渐变（radial-gradient）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:58 AM
css3radial-gradient渐变

上篇文章介绍了 CSS3 线性渐变（linear-gradient），这篇文章向大家介绍 radial-gradient（径向渐变）以及重复渐变（线性重复、径向重复）。在以前，渐变效果和阴影、圆角效果一样都是做成图片，现在 CSS3 可以直接编写  CSS 代码来实现。

CSS3 径向渐变和线性渐变是很相似的，我们首先来看其语法：

.代码  

  1. -moz-radial-gradient([ || ,]? [ || ,]? , [, ]*);  
  2.  -webkit-radial-gradient([ || ,]? [ || ,]? , [, ]*);  

 

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

　　示例一：

.代码  

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

 

　　效果：

　　示例二：

.代码  

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

 

　　效果如下：

　　从以上俩个示例的代码中发现，他们起止色想同，但就是示例二定位了些数据，为什么会造成这么大的区别呢？其实在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变，这就是我们示例一和示例的区别之处：虽然圆具有相同的起止颜色，但在示例一为默认的颜色间隔均匀的渐变，而示例二每种颜色都有特定的位置。分享一个最好用的UI前端框架！

　　示例三：

.代码  

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

 

　　效果如下：

　　示例四：

.代码  

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

 

　　效果如下：

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

　　示例五：

.代码  

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

 

　　效果如下：

　　示例六：

.代码  

  1. background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);  
  2. 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)到近边的距离设定的，而示例六是由从起始点到远角的的距离决定的。分享一个最好用的UI前端框架！

　　示例七：

.代码  

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

 

　　效果如下：

　　示例八：

 

　　效果如下：

　　示例七和示例八主要演示了圆的近边VS远边 ，示例七的圆的渐变大小由起始点(center)到近边的距离决定，而示例八的圆则有起始点到远边的距离决定。

　　示例九：

.代码  

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

 

　　效果如下：

　　示例十：

.代码  

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

 

　　效果如下：

　　示例九和示例十演示了包含圆 。在这里你可以看到示例九的默认圈，同一渐变版本，但是被包含的示例十的圆。分享一个最好用的UI前端框架！

　　最后我们在来看两个实例一个是应用了中心定位和full sized,如下所示：

.代码  

  1. /* Firefox 3.6+ */  
  2.  background: -moz-radial-gradient(circle, #ace, #f96);  
  3.  /* Safari 4-5, Chrome 1-9 */  
  4.  /* Can't specify a percentage size? Laaaaaame. */  
  5.  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96));  
  6.  /* Safari 5.1+, Chrome 10+ */  
  7.  background: -webkit-radial-gradient(circle, #ace, #f96);  

 

　　效果如下：

　　下面这个实例应用的是Positioned, Sized，请看代码和效果：

.代码  

  1. /* Firefox 3.6+ */  
  2. /* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */  
  3. background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96);  
  4. /* Safari 4-5, Chrome 1-9 */  
  5. background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96));  
  6. /* Safari 5.1+, Chrome 10+ */  
  7. background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);  

 

　　效果如下：

　　到此关于 CSS3 的两种渐变方式我们都介绍完了。再浪费大家一点时间，我们看看CSS3 重复渐变（Repeating Gradient）的应用。

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

.代码  

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

 

　　效果：

　　有关于CSS3渐变的东西就完了，大家看完了肯定会想，他主要用在哪些方面呢？这个说起来就多了，最简单的就是制作背景，我们还可以应用其制作一些漂亮的按钮，还可以用他来制作patterns，我在这里列出几种制作patterns的示例代码吧：

　　HTML代码：

.代码  

    1.   
  2.    
  3.   
  4.    
  5.   
  6.    
  7.   
  8.    
  9.   
  10.    
  11.   
  12.    
  13.   
  14.   

 

　　CSS 代码：

.代码  

  1. ul {  
  2.   overflow: hidden;  
  3.   margin-top: 20px;  
  4. }  
  5. li{  
  6.   width: 150px;  
  7.   height: 80px;  
  8.   margin-bottom: 10px;  
  9.   float: left;  
  10.   margin-right: 5px;  
  11.   background: #ace;  
  12.   /*Controls the size*/  
  13.   -webkit-background-size: 20px 20px;  
  14.   -moz-background-size: 20px 20px;  
  15.   background-size: 20px 20px;  
  16. }  
  17.                                
  18. li.gradient1 {  
  19.   background-image: -webkit-gradient(  
  20.     linear,  
  21.     0 100%, 100% 0,  
  22.     color-stop(.25, rgba(255, 255, 255, .2)),  
  23.     color-stop(.25, transparent),  
  24.     color-stop(.5, transparent),  
  25.     color-stop(.5, rgba(255, 255, 255, .2)),  
  26.     color-stop(.75, rgba(255, 255, 255, .2)),  
  27.     color-stop(.75, transparent),  
  28.     to(transparent)  
  29.     );  
  30.   background-image: -moz-linear-gradient(  
  31.     45deg,  
  32.     rgba(255, 255, 255, .2) 25%,  
  33.     transparent 25%,  
  34.     transparent 50%,  
  35.     rgba(255, 255, 255, .2) 50%,  
  36.     rgba(255, 255, 255, .2) 75%,  
  37.     transparent 75%,  
  38.     transparent  
  39.     );  
  40.   background-image: -o-linear-gradient(  
  41.     45deg,  
  42.     rgba(255, 255, 255, .2) 25%,  
  43.     transparent 25%,  
  44.     transparent 50%,  
  45.     rgba(255, 255, 255, .2) 50%,  
  46.     rgba(255, 255, 255, .2) 75%,  
  47.     transparent 75%,  
  48.     transparent  
  49.   );  
  50.   background-image: linear-gradient(  
  51.     45deg,  
  52.     rgba(255, 255, 255, .2) 25%,  
  53.     transparent 25%,  
  54.     transparent 50%,  
  55.     gba(255, 255, 255, .2) 50%,  
  56.     rgba(255, 255, 255, .2) 75%,  
  57.     transparent 75%,  
  58.     transparent  
  59.     );  
  60. }  
  61.                            
  62. li.gradient2 {  
  63.    background-image: -webkit-gradient(linear, 0 0, 100% 100%,  
  64.       color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),  
  65.       color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),  
  66.       color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  
  67.       to(transparent));  
  68.    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
  69.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
  70.       transparent 75%, transparent);  
  71.    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
  72.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
  73.       transparent 75%, transparent);  
  74.    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
  75.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
  76.       transparent 75%, transparent);  
  77. }  
  78.                                
  79. li.gradient3 {  
  80.   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  
  81.   background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  82.   background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  83.   background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  84. }  
  85.                                
  86. li.gradient4 {  
  87.   background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  
  88.   background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  89.   background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  90.   background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
  91. }  
  92.                                
  93. li.gradient5 {  
  94.   background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),  
  95.       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),  
  96.       -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),  
  97.       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));  
  98.   background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
  99.      -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
  100.      -moz-linear-gradient(45deg, transparent 75%, #555 75%),  
  101.      -moz-linear-gradient(-45deg, transparent 75%, #555 75%);  
  102.   background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
  103.      -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
  104.      -o-linear-gradient(45deg, transparent 75%, #555 75%),  
  105.      -o-linear-gradient(-45deg, transparent 75%, #555 75%);  
  106.   background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
  107.     linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
  108.     linear-gradient(45deg, transparent 75%, #555 75%),  
  109.     linear-gradient(-45deg, transparent 75%, #555 75%);  
  110. }  
  111.                                
  112. li.gradient6 {  
  113.   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))),  
  114.      -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)));  
  115.   background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
  116.      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
  117.   background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
  118.      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
  119.   background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
  120.      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
  121. }  

 

　　效果：分享一个最好用的UI前端框架！

　　不错的效果吧，当然感兴趣的朋友可以到这里学习制作更多的不同效果。

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
HTML，CSS和JavaScript：示例和实际应用HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：启用Web浏览器可以显示内容HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
4 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
4 周前ByDDD
<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前By尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前ByDDD
显示更多

热工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

显示更多

热门话题

Java教程
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
显示更多