CSS(8)背景图像及渐变

背景图像及渐变

背景图像

border 边框 ： 粗细（px）， 样式 （solid实线，dashed虚线）， 颜色

background-image: 默认是全部平铺的

no-repeat 不平铺

repeat-x 横向平铺

repeat-y 纵向平铺

代码：

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="/style.css">
 ​
 </head>
 <body>
 ​
 <div class="div1"></div>
 <div class="div2"></div>
 <div class="div3"></div>
 ​
 </body>
 </html>

css：

 div{
   width: 800px;
   height: 800px;
 ​
   /*border   边框*/
   border: 2px solid #2f70ff;
 ​
   /*background-image:   默认是全部平铺的*/
   background-image: url("/resources/qqyzml.png");
 }
 ​
 .div1{
   /*不平铺*/
   background-repeat: no-repeat;
 }
 ​
 .div2{
   /*横向平铺*/
   background-repeat: repeat-x;
 }
 ​
 .div3{
   /*纵向平铺*/
   background-repeat: repeat-y;
 }

渐变

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../渐变/style.css">
 ​
 </head>
 <body>
 ​
 <!-- 打字会变条纹 -->
 啦啦啦啦啦
 ​
 </body>
 </html>

css：

 body{
 /*
 https://www.grabient.com/
 径向渐变，圆形渐变
 */
   background-image: -webkit-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
   background-image: -moz-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
   background-image: -o-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
   background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
 }

 

 posted on 2021-06-26 10:53  琪琪又炸毛了  阅读(130)  评论(0)  编辑  收藏  举报