【问题标题】:How to move circular radial gradient slightly to top?如何将圆形径向渐变稍微移动到顶部?
【发布时间】:2017-04-14 08:10:15
【问题描述】:

如何在保持相同圆形宽度和高度的同时稍微向上移动径向渐变?

div {
  line-height: 100px;  
  text-align: center;
  color: #333;  
  width: 100%;
  background: radial-gradient(ellipse 115px 102px, #fff, #516e8e);
}
<div>text</div>

我找到了这个解决方案,但是渐变被拉伸了。

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

这里是Codepen

【问题讨论】:

    标签: html css gradient


    【解决方案1】:

    使用at定义渐变的位置,如下:

    radial-gradient(115px 102px at center top, #90aed0, #516e8e)
    

    您可以使用关键字px% 值来定义形状的位置:

    .box-2 {
      background: radial-gradient(115px 102px at center top, #90aed0, #516e8e);
    }
    
    .box {
      line-height: 100px;  
      text-align: center;
      color: #fff;  
      width: 100%;
    }
    <p class="box box-2">text</p>

    注意:因为您已经定义了特定的大小,即115px 102px,所以不需要使用ellipsecircle 关键字。

    【讨论】:

      猜你喜欢
      • 2020-12-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多