CSS|径向渐变

最新推荐文章于 2024-05-08 16:09:38 发布

Alan_Lowe

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量163

点赞数 1

分类专栏： # CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_45985728/article/details/119254568

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|径向渐变

使用background-image: radial-gradient(渐变中心的形状（circle原型，ellipse椭圆）,blue,red……)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
  <style>
    div{
      width: 400px;
      height: 200px;
    }
    /*background-image: radial-gradient(渐变中心的形状（circle原型，ellipse椭圆）,blue,red……);*/
    .div1{
      background-image: radial-gradient(circle,blue,red);
    }
    .div2{
      background-image: radial-gradient(ellipse,blue,red);
    }
    /*不均匀分布*/
    .div3{
      background-image: radial-gradient(ellipse,blue 5%,red 5%);
    }
    .div4{
      background-image: radial-gradient(yellow,blue,red);
    }
  </style>
</head>
<body>

<div class="div1">
  div1
</div>
<br>
<div class="div2">
  div2
</div>
<br>
<div class="div3">
  div3
</div>
<br>
<div class="div4">
  div4
</div>

</body>
</html>

在这里插入图片描述

人生没有白走的路，每一步都算数！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Alan_Lowe

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|径向渐变

CSS|径向渐变使用background-image: radial-gradient(渐变中心的形状（circle原型，ellipse椭圆）,blue,red……)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>径向渐变</title> <style> div{ width: 400px
复制链接

扫一扫