百科狗-知识改变命运!
--

repeating-radial-gradient() - 重复的径向渐变 - css 渐变

百变鹏仔1年前 (2023-11-21)阅读数 23#技术干货
文章标签中心点

repeating-radial-gradient()

版本:CSS3

CSS函数 repeating-radial-gradient()创建一个从原点辐射的重复渐变组成的image。它类似于radial-gradient 并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。函数的结果是gradient数据类型的对象,是一种特殊的image类型。

示例

/* 一个从容器中心点开始的重复渐变,
   从红色开始,渐变到蓝色,再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

repeating-radial-gradient() - 重复的径向渐变 - css 渐变

每次重复时,色标位置的偏移量都是基准渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的色值应该与第一个色标的色值保持一致;如果不一致的话,会导致非常突兀的渐变效果。与其他渐变一样,线形重复渐变没有提供固定的尺寸;即,它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸。

浏览器支持

IE10以上版本的浏览器都支持repeating-radial-gradient()

语法:

repeating-radial-gradient(||||)

取值:

  • :position与 background-position 或者 transform-origin类似。默认值为 center。
  • :渐变轴的角度。角度顺时针增加,默认值为0deg。
  • :渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。默认值为椭圆形,即 ellipse。
  • :关键字用于描述边缘轮廓的具体位置。以下为关键字常量:
    常量描述
    closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
    closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
    farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
  • :表示某个确定位置的固定色值,包含一个值加上可选的位置值(相对虚拟渐变射线的或者长度值)。百分比值0%,或者长度值0,表示渐变中心点;百分比值100%表示渐变射线与边缘形状相交的点。其间的百分比值线性对应渐变射线上的点。

例子

径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”,每个圆的中心位置用点指定,大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

黑白相间的渐变

black white
div {
  display: block;
  width: 50%;
  height: 80px;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  text-shadow: 1px 1px 0pt black;
  color: white;
  border: 1px solid black;
  height:5.5em;
}
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Farthest-corner渐变

farthest-corner
div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  text-shadow: 1px 1px 0pt blue;
  color: white;
  border: 1px solid black;
  height:5.5em;
}
background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)