CSS Day9-CSS新样式

9.1 背景相关属性

背景图片 background-image

url引入图片地址

展示特点：由上到下，由左到右依次排列

背景图大小 background-size

background-size：宽高；（相比这个最优）

background-size：cover；图片展示不全

background-size：contain；图片平铺

背景平铺 background-repeat

background-repeat：repeat-x; 水平方向平铺

background-repeat：repeat-y; 垂直方向平铺

background-repeat：no-repeat；不平铺（常用）

--------------------------------------以下为不常用---------------------------------

背景图像相对位置 background-origin

background-origin:padding-box; 从padding开始处的相对位置

设置背景图像的起始位置 background-position

background-position:center;

背景图剪切 background-clip

content-box 背景绘制在内容方框内（剪切成内容方框）

背景图复合属性

background：url color image position/size repeat origin clip;

9.2 边框相关属性

外轮廓 outline(了解)
外边框圆角 border-radius
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
     .box1{
         width: 200px;
         height: 300px;
         border: 2px solid rgb(148, 208, 59);
         border-radius: 20px;
         /* border-radius: 10%; */
     }
 </style>
</head>
<body>
 <div class="box1"></div>
</body>
</html>
盒子阴影 box-shaow

四个值时 box-shaow：水平方向(正值向右) 垂直方向(正值向下) 模糊值阴影颜色（默认黑色）；

五个值时 box-shaow：水平方向垂直方向模糊值外延值阴影颜色（默认黑色）；

六个值时 box-shaow：水平方向垂直方向模糊值外延值阴影颜色（默认黑色）内延值；

resize 调整盒子的大小（了解）

9.3 渐变

径性渐变 radial-gradient

调整为圆形 background-image: radial-gradient(red, yellow, green);

圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);

background-image: radial-gradient(at 水平(50px) 垂直（100px）, red, yellow, green);

调整为正圆 background-image: radial-gradient(100px，100px, red, yellow, green);

第一个值代表x轴的半径，第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);

线性渐变 linear-gradient

默认从上到下渐变 background-image: linear-gradient(red, yellow, green);

通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);