HTML5之linear-gradient背景颜色搭配

最新推荐文章于 2024-02-23 12:18:02 发布

liyu1059915776

最新推荐文章于 2024-02-23 12:18:02 发布

阅读量3.6k

点赞数

分类专栏： HTML5 背景色搭配文章标签： HTML5 背景色搭配

本文链接：https://blog.csdn.net/liyu1059915776/article/details/83384569

版权

HTML5 同时被 2 个专栏收录

4 篇文章

订阅专栏

背景色搭配

1 篇文章

订阅专栏

鲁上代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>HTML5之linear-gradient背景颜色搭配</title>
   <meta name="keywords" content=""/>
   <meta name="description" content=""/>
   <style type="text/css">
       div {
           width: 300px;
           height: 200px;
           border: 1px solid #000;
           float: left;
           margin: 0 0 10px 10px;
       }
       /* 默认，从上往下 to bottom 0deg*/
       .box1 {
           background-image: linear-gradient(red,yellow,blue);
       }
       /* 从右往左 */
       .box2 {
           background-image: linear-gradient(to left,red,yellow,blue);
       }
       /* 从左往右 */
       .box3 {
           background-image: linear-gradient(to right,red,yellow,blue);
       }

       .box4 {
           background-image: linear-gradient(180deg,red,yellow,blue);
       }
       .box5 {
           background-image: linear-gradient(red 10px,yellow 20px,blue 30px);
           /*background-repeat: no-repeat;*/
           background-size: 100% 30px;
       }
       .box6 {
           background-image: linear-gradient(red 10px,yellow 0,yellow 20px,blue 0,blue 30px);

background-size: 100% 30px;
}

       .box7 {
           background-image: linear-gradient(45deg,red 25%,yellow 0,yellow 50%,red 0,red 75%,yellow 0);
           /*background-repeat: no-repeat;*/
           background-size: 30px 30px;
       }
       /* repeating-linear-gradient 色标无限循环并重复 */
       .box8 {
           background-image: repeating-linear-gradient(45deg,red,red 15px,yellow 15px,yellow 30px);
           /*background-repeat: no-repeat;*/
           /*background-size: 30px 30px;*/
       }

       .box9 {
           background: #58a;
           background-image: repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 15px,transparent 30px);
       }
   </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div>
   <div class="box5"></div>
   <div class="box6"></div>
   <div class="box7"></div>
   <div class="box8"></div>
   <div class="box9"></div>
</body>
</html>