背景实现可以兼容所有浏览器的渐变背景

最新推荐文章于 2021-06-17 03:45:46 发布

方_糖

最新推荐文章于 2021-06-17 03:45:46 发布

阅读量211

点赞数 1

分类专栏： CSS3 文章标签：渐变背景浏览器兼容 CSS3

本文链接：https://blog.csdn.net/qq_36828433/article/details/83184326

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.代码

<!-- 参考：http://www.runoob.com/css3/css3-gradients.html -->
<html>
<head>
  <meta charset="utf-8" />
  <style>
  *{
    padding:0;
    margin:0;
  }
  .gradient {
    width: 100%;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    background-color:#79bbff;
}
.box{
  height:1200px;
}
  </style>
</head>
<body>
  <div class="gradient">
    <div class="box"></div>
  </div>
</body>
</html>