HTML渐变

申申呢？

已于 2023-04-13 16:06:05 修改

阅读量523

点赞数 1

分类专栏： html 文章标签： html css css3

于 2023-04-06 20:31:52 首次发布

本文链接：https://blog.csdn.net/qq_52181663/article/details/129998471

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

渐变：
线性渐变
background-image: linear-gradient(方向,颜色1,颜色2…)
颜色可以写多个
方向有多种写法
01.默认值从上到下
02.
to left 去到左边从右到左

     background-image: linear-gradient(to left, red, yellow);

to right
to top
to bottom默认值
03.
to right top去到石上角从左下角到右上角
to right bottom
to left bottomto left top
4.角度
0deg从下到上
18edeg默认值从上到下
颜色突变
两段颜色在同一个位置

background-image: linear-gradient(red 33.3%, yellow 33.3%, yellow 66.6%, green 66.6%);

二、径向渐变（了解就行）

<style>
  div{
    width: 300px;
    height: 200px;
    margin: auto;
    background-image: radial-gradient(red,pink);
    background-image: radial-gradient(circle,pink,red);
    background-image: radial-gradient(circle at left,pink,yellow);
    background-image: radial-gradient(circle at 100px 100px,pink,yellow);
    background-image: radial-gradient(circle at 50%,pink,yellow);
  }
 </style>
</head>
<body>
  <div></div>
</body>
</html>
<!-- 径向渐变
background-image: radial-gradient(方向，颜色1，颜色2...)
渐变的形状
默认值椭圆形圆形circle
at position 渐变中心点的位置/方向
水平垂直
数值
百分比参考元素的宽高方位词
left right centertop bottom center
 -->

三、重复渐变

 <style>
   .d1{
    width: 300px;
    height: 300px;
    background-image: repeating-linear-gradient(green 5%,yellow 20%);
   }
   .d2{
    width: 400px;
    height: 400px;
    background-image: repeating-radial-gradient(green 7%,pink 27%);
   }
  </style>

申申呢？

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML渐变

background-image: linear-gradient(方向,颜色1,颜色2…to right top去到石上角从左下角到右上角。to left 去到左边从右到左。18edeg默认值从上到下。to bottom默认值。二、径向渐变（了解就行）01.默认值从上到下。两段颜色在同一个位置。
复制链接

扫一扫