如何使用css3给图片实现渐变效果

发布时间:2021-08-17 10:13:10 作者:小新
来源:亿速云 阅读:187

小编给大家分享一下如何使用css3给图片实现渐变效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

浏览器支持情况

IEFFChromeSafariOperaiOSAndroidAndroid Chrome
6-9(no)2-3.5(no)4-9(部分-webkit-)3.1-3.2(no)-3.2-4.3(部分)2.1-3.0(-webkit-)10-25(-webkit-)
10+3.6-15(-webkit-)10-25(-webkit-)4-5(部分)5-6.1(-webkit-)-5+4-4.3(-webkit-)26+
-15+25+5-615+-4.4+-

线性渐变 linear-gradient

使用语法

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);

以下代码都可以运行,执行的结果一样

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

可以定义角度,起始方向,颜色,以及颜色占比

demo

<div style="width: 200px; height: 200px;"></div>
<style>
  div {
    background: linear-gradient(
      to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
</style>

如何使用css3给图片实现渐变效果

填充试线性渐变 repeating-linear-gradient

用法和 linear-gradient 差不多,其实就是渐变的一个填充。可以精确到像素,比如实现一个斑马纹

<div class="g"></div>
<style>
  .g {
    background: repeating-linear-gradient(
      -45deg,
      transprent,
      transprent 25px,
      #fff 25px,
      #fff50px
    );
  }
</style>

如何使用css3给图片实现渐变效果

径向渐变 radial-gradient

使用语法

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )

以下代码执行结果一样

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

可以通过 length 来快速定位形状的位置closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。

closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。

farthest-side 与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。

farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

可以通过 at 来快速制定圆心的位置circle at left top圆心在左上角

代码示例

<style>
  div {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
  }
  .g1 {
    background: radial-gradient(circle at center, #f00, #ff0, #080);
  }
  .g2 {
    background: radial-gradient(circle closest-side, #f00, #ff0, #080);
  }
  .g3 {
    background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
  }
  .g4 {
    background: radial-gradient(at top right, #f00, #ff0, #080);
  }
  .g5 {
    background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
  }
  .g6 {
    background: radial-gradient(
        farthest-side at top right,
        #f00,
        #ff0,
        #080,
        transparent
      ), radial-gradient(60px at top left, #f00, #ff0, #080);
  }
</style>
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
<div class="g6"></div>

得到如下

如何使用css3给图片实现渐变效果

填充式径向渐变repeating-radial-gradient

这个和 repeating-linear-gradient 使用差不多,就是对渐变的填充。

代码示例

<style>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    float: left;
    margin: 10px;
  }
  .g1 {
    background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
  }
  .g2 {
    background: repeating-radial-gradient(
      at top left,
      #f00,
      #ff0 10%,
      #080 15%,
      #ff0 20%,
      #f00 25%
    );
  }
  .g3 {
    background: repeating-radial-gradient(
      circle closest-corner at 20px 50px,
      #f00,
      #ff0 10%,
      #080 20%,
      #ff0 30%,
      #f00 40%
    );
  }
</style>

<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>

以上是“如何使用css3给图片实现渐变效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS3实现径向渐变效果的方法
  2. 如何实现CSS3线性渐变效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 html5

上一篇:怎么在CentOS7.37上安装和安全配置MariaDB

下一篇:webpack4.x如何打包

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》