精华内容
下载资源
问答
  • CSS 径向渐变CSS 径向渐变A radial gradient is defined by its center.To create a radial gradient you must also define at least two color stops.句法background-image: radial-gradient(shape sizeatposition,...

    CSS 径向渐变

    CSS 径向渐变

    A radial gradient is defined by its center.

    To create a radial gradient you must also define at least two color stops.

    句法

    background-image: radial-gradient(shape sizeatposition, start-color, ..., last-color);

    By default, shape is ellipse, size is farthest-corner, and position is center.

    Radial Gradient - Evenly Spaced Color Stops (this is default)

    The following example shows a radial gradient with evenly spaced color stops:

    例子

    #grad {

    background-image: radial-gradient(red, yellow, green);

    }

    来试试吧 »

    Radial Gradient - Differently Spaced Color Stops

    The following example shows a radial gradient with differently spaced color stops:

    例子

    #grad {

    background-image: radial-gradient(red 5%, yellow 15%, green 60%);

    }

    来试试吧 »

    Set Shape

    The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

    The following example shows a radial gradient with the shape of a circle:

    例子

    #grad {

    background-image: radial-gradient(circle, red, yellow, green);

    }

    来试试吧 »

    Use of Different Size Keywords

    The size parameter defines the size of the gradient. It can take four values:

    closest-side

    farthest-side

    closest-corner

    farthest-corner

    例子

    A radial gradient with different size keywords:

    #grad1 {

    background-image: radial-gradient(closest-side at 60% 55%, red, yellow,

    black);

    }

    #grad2 {

    background-image: radial-gradient(farthest-side at 60%

    55%, red, yellow, black);

    }

    来试试吧 »

    Repeating a radial-gradient

    The repeating-radial-gradient() function is used to repeat radial gradients:

    例子

    A repeating radial gradient:

    #grad {

    background-image:

    repeating-radial-gradient(red, yellow 10%, green 15%);

    }

    来试试吧 »

    CSS Gradient Properties

    The following table lists the CSS gradient properties:

    Property

    描述

    Sets one or more background images for an element

    展开全文
  • 有了解上周CSS3线性渐变的大家想必能很快掌握CSS3径向渐变,两者的实现方法大同小异,但CSS3径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合,属性参数也繁多复杂,...

    HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合,属性参数也繁多复杂,不过别担心,下面会为大家详细介绍。

    本文主要内容

    1. 径向渐变简介

    2. 径向渐变属性与参数

    3. 径向渐变基本用法

    1、径向渐变简介

    CSS3径向渐变,是一种从起点到终点颜色从内到外进行圆形渐变,就像从中间点向四周方向拉伸一样。CSS3径向渐变不再像线性渐变那样沿着一条直线进行过度,而是以圆形或椭圆形进行渐变是圆形或椭圆形渐变,是从一个起点向所有方向渐变。

    2、径向渐变属性与参数

    radial-gradient(position, shape size, start-color, stop-color)

    position:定义圆心位置;

    shape size:由2个参数组成,前者shape定义圆形或椭圆形,后者size定义大小;

    start-color:设置开始的颜色;

    stop-color:设置结束的颜色;

    position、shape size可选可不选,如果没有进行设置,表示该参数采用默认值。

    start-color和stop-color为必须设置的参数,并且径向渐变同线性渐变一样可以设置多种颜色。

    3、径向渐变基本用法

    3.1 定义圆心位置position

    position用于定义径向渐变的圆心位置,属性值跟background-position属性值相似。可以通过px、em、百分比设置,也可以使用关键字设置,这一点与线性渐变的设置方式是一致的,如:top上方、top-right右上方等等。如下示例:

    div {

    width: 200px;

    height: 150px;

    color: #fff;

    line-height: 150px;

    text-align: center;

    }

    .radial{

    margin-bottom:10px;

    background:-webkit-radial-gradient(#fff, #39f);

    }

    .radial-a{

    background:-webkit-radial-gradient(top, #fff, #39f);

    }

    效果如下:

    e820bd877b5e4de795b62cb17a073437.jpg

    3.2 定义形状shape与定义大小size

    shape取值:cricle 将径向渐变为圆形 | ellipse 将径向渐变为椭圆形

    .raidal-circle {

    background:-webkit-radial-gradient(circle,#000,#fff);

    }

    .raidal-ellipse {

    background:-webkit-radial-gradient(ellipse,#000,#fff);

    }

    效果如下:

    22a80a1f05f644dfbf3466784c134dd2.jpg

    定义大小size

    size主要用于定义径向渐变的结束形状大小。

    closet-side  指定径向渐变的半径长度为从圆心到离圆心最近的边

    closest-corner  指定径向渐变的半径长度为从圆心到离圆心最近的角

    farthest-side  指定径向渐变的半径长度为从圆心到离圆心最远的边

    farthest-corner  指定径向渐变的半径长度为从圆心到离圆心最远的角

    .raidal-closest-side {

    background:-webkit-radial-gradient(circle closest-side,#000,#fff);

    }

    .raidal-closest-corner {

    background:-webkit-radial-gradient(circle closest-corner,#000,#fff);

    }

    .raidal-farthest-side {

    background:-webkit-radial-gradient(circle farthest-side,#000,#fff);

    }

    .raidal-farthest-corner {

    background:-webkit-radial-gradient(circle farthest-corner,#000,#fff);

    }

    效果如下:

    3f4d5f2354b04d0f8b37c52d1f063c35.jpg

    3.3 开始颜色start-color和结束颜色stop-color

    start-color设置开始颜色

    stop-color设置结束颜色。

    颜色可以为关键词、十六进制颜色值、RGBA颜色值等。径向渐变也接受一个颜色值列表,用于同时定义多种颜色的径向渐变。

    .raidal-start-end {

    background:-webkit-radial-gradient(red,orange,yellow,green,blue);

    }

    效果如下:

    9e7078289a234e53b18595c49a63112f.jpg

    默认情况下,径向渐变颜色节点是均匀分布的,不过我们也可以为每一种颜色添加百分比来控制颜色的分步,方法与线性渐变相同。

    .raidal-start-end-a {

    background:-webkit-radial-gradient(red 4%,orange 46%,yellow 5%,green 20%,blue);

    }

    效果如下:

    9ddffbd6d63c4ece8fab58a7520f2ab5.jpg

    小结

    为了方便学习,建议使用主流浏览器进行demo书写,这样可以避免书写大量的兼容代码,但是在实际开发中,为了兼容,各个浏览器的前缀是必须考虑的。

    相关文章推荐:

    点击下方“阅读原文”查看效果案例

    ↓↓↓

    展开全文
  • CSS3实现重复径向渐变效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;...css3中的渐变效果,包括线性渐变、径向渐变、重复线性渐变以及重复径向渐变。这些渐变效果,可以使我们的网页内容更...

    CSS3实现重复径向渐变效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过“repeating-radial-gradient”属性实现重复径向渐变效果即可。

    e96b284f20abf795938d97a6991aabd3.png

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    css3中的渐变效果,包括线性渐变、径向渐变、重复线性渐变以及重复径向渐变。这些渐变效果,可以使我们的网页内容更加丰富炫彩。

    691765393d68b49efef065028606e8d7.png

    推荐学习:《CSS3教程》

    下面我就结合简单的示例继续给大家介绍css3实现重复径向渐变的方法。

    代码示例如下:

    CSS3创建重复径向渐变效果示例

    .container{

    text-align:center;

    padding:20px 0;

    width:960px;

    margin: 0 auto;

    }

    .container div{

    width:200px;

    height:150px;

    display:inline-block;

    margin:2px;

    color:#ec8007;

    vertical-align: top;

    line-height: 230px;

    font-size: 20px;

    }

    .repeating-radial{

    background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);

    }

    重复径向渐变

    重复径向渐变效果如下:

    a369d5d884ccdb2dbd496df89ecf59b9.png

    如上图所示,从中心开始颜色从#4b6c9c过渡到#5ac4ed,再从白色过渡到白色。于是就形成上图中蓝白条间隔的重复渐变效果。

    c48bc11f74f98215f8f51491da41fc4a.png

    上图是从#9492ff过渡到颜色#ccccff的重复径向渐变。

    这里需要注意的就是,函数repeating-radial-gradient() 的使用。

    repeating-radial-gradient()函数创建一个从原点辐射的重复渐变组成的 。

    repeating-radial-gradient()的语法与radial-gradient()相同。

    本篇文章就是关于CSS3实现重复径向渐变效果的方法介绍,非常的简单,希望对需要的朋友有所帮助!

    展开全文
  • CSS3的界面效果属性主要包括线性渐变、径向渐变CSS3设置线性渐变在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值)”样式可以实现线性渐变...

    在CSS3之前,如果需要添加界面效果,通常要设置背景图像来实现。在CSS3中增加了渐变属性,通过渐变属性,也可以轻松的实现界面效果。CSS3的界面效果属性主要包括线性渐变、径向渐变。

    CSS3设置线性渐变

    在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值)”样式可以实现线性渐变效果。它的基本语法格式为:

    其中linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值。

    渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键词(to+left top right bottom)。

    颜色值用于设置渐变颜色,其中“颜色值1”便是起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用英文逗号“,”隔开

    CSS3设置径向渐变

    径向渐变是网页中另一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心点开始,依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变。它的基本语法格式为:

    其中radial-gradient用于定义渐变的方向为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。

    渐变形状用来定义径向渐变的形状,其取值既可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键字。

    圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。

    “颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加索哥颜色值,各颜色之间用英文逗号“,”隔开。

    CSS3设置重复渐变

    在网页设计中,经常会遇到已在一个背景上重复应用渐变模式的情况,这时就需要使用重复渐变。重复渐变包括重复线性渐变和重复径向渐变。

    在CSS3中通过“background-image:repeating-linear-gradient (参数值);”样式可以实现重复线性渐变的效果。它的基本语法格式为:

    在CSS3只能够通过“background-image:repeating-radial-gradient(参数值);”样式可以实现重复径向渐变的效果。它的基本语法格式为:

    综合应用:

    展开全文
  • 主要为大家详细介绍了CSS3 渐变(Gradients)之CSS3 径向渐变的相关资料,了解学习CSS3 线性渐变,感兴趣的小伙伴们可以参考一下
  • CSS3 Gradient 分为 linear-gradient(线性渐变) 和radial-gradient(径向渐变)。记住渐变并不是CSS3的一个属性,而是一个属性的值,虽然在CSS3中没有专门注明渐变是针对background的,但是目前我所了解到的是只有...
  • 本文为大家介绍下css3 线性渐变和径向渐变的应用示例,线性渐变:ie6以下不兼容;径向渐变:只支持firefox、Chrome和Safari,需要的朋友可以参考下
  • CSS语言:CSSSCSS确定HTML {height: 100%;}BODY {background: gold;background-image: -webkit-radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50...
  • css 径向渐变Until recently each browser implemented CSS radial gradients in slightly different ways; finally, the specification has been shaken out to a single, shared standard. Obviously, the ...
  • css3径向渐变

    2016-10-15 17:06:00
    css3径向渐变制作球体
  • CSS3径向渐变的使用方法希望对您以后学习和理解css径向渐变起到作用,这是我一直希望看到的,感谢您的浏览,如果有什么意见可以留言
  • CSS3径向渐变radial-gradient详解

    千次阅读 2019-04-22 21:52:15
    CSS3径向渐变radio-gradient 1、语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变。其语法如下: background: radial-gradient...
  • CSS3实现径向渐变

    千次阅读 2019-08-28 01:23:57
    径向渐变的基础知识: 径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)。 一、径向渐变的基本语法: background-image:-webkit-gradient...第一组参数type(类型)为 radial,因为是径向渐变...
  • $('#gradient').css({ background: "-webkit-radial-gradient(center, circle cover, " + color1 + "," + color2 + ")" }); step += gradientSpeed; if (step >= 1) { step %= 1; colorIndices[0] = colorIndices[1...
  • CSS3渐变——径向渐变

    2015-04-15 18:00:00
    上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本...
  • CSS3实现径向渐变效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过“background:radial-gradient(#4b6c9c,#5ac4ed);”样式实现径向渐变效果即可。本文操作环境:Windows7系统、Dell G3电脑...
  • 1 径向渐变radial-gradient这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里1.1 基本语法线性渐变是沿着...1.2 参数详细说明position,指明径向渐变的椭圆或者圆心的位置,支持的值有:...
  • 线性渐变:ie6以下不兼容径向渐变:只支持firefox、Chrome和SafariBackground Color*{marigin:0;padding:0;}div{margin-bottom:20px;width:300px;height:100px;}.linear{/*线性渐变样式*/background-color:#1FA9F4; ...
  • CSS3怎样设置径向渐变?这种百度一下就有答案的问题。如何利用css3运用径向渐变制作一个小球如何使用css径向渐变实现这图的混合效果貌似各种渐变方式混合在一起还要设置角度?这个混得太复杂了有没有高手这么复杂...
  • 上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色、方向和位置。那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们同样...
  • 径向渐变 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周颜色渐变 语法: background:radial-gradient(shape at center,start-color,...,...
  • 径向渐变radial-gradient: 线性渐变linear-gradient是从一个方向到另一个方向的颜色渐变效果,而径向渐变radial-gradient是从一个点向四周颜色渐变的效果。 语法: background:radial-gradient(中心坐标,形状 ...
  • CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。 一、径向渐变的语法 CSS3径向渐变已得到众多浏览器引擎的...
  • CSS3-径向渐变

    2020-01-29 16:37:01
    CSS3 中提供了实现径向渐变的 radial-gradent() 函数;使用该函数时,至少需要两个终止色。 语法: background-image: radial-gradient(shape size at position, start-color, ..., last-color); shape 用于设置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,442
精华内容 2,576
关键字:

径向渐变css3参数