css radial-gradient绘制渐变背景

最新推荐文章于 2024-07-25 22:03:21 发布

IICOOM

最新推荐文章于 2024-07-25 22:03:21 发布

阅读量476

点赞数

分类专栏： Web开发文章标签：前端

本文链接：https://blog.csdn.net/IICOOM/article/details/124566548

版权

Web开发专栏收录该内容

47 篇文章 0 订阅

订阅专栏

radial-gradient是一个很酷的css属性。我们可以用它给元素绘制出很有感觉的渐变背景。如果你不经常用它，会发现它的语法不太容易记忆，相比较于linear-gradient() 要稍微复杂一些。本文通过2个例子，带你领略一下它的魅力。

渐变背景色

<div class="hire_wrapper"></div>

.hire_wrapper {
  background: radial-gradient(circle at 22% 5%, rgb(85, 55, 101), rgb(30, 38, 74) 76%);
  height: 100vh;
}

可以在浏览器渲染出，下面的背景渐变：
radial-gradient

在线演示地址

高光文字

<h1>Syncopate</h1>

@import url(https://fonts.googleapis.com/css?family=Syncopate);

body {
  height: 100vh;
  background: radial-gradient(
    circle closest-corner at center 125px,
    #222,
    black 40%
  ) no-repeat;
  text-align: center;
}
h1 {
  display: inline-block;
  padding-top: 100px;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  background: radial-gradient(
    circle farthest-corner at center center,
    #ccc,
    #333
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}