一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
一。
.box{
width: 300px;
height: 300px;
border:3px solid red;
①。border-radius: 20px 10px 30px 50px;(按照顺时针的顺序去设置 左上角 右上角 右下角 左下角 )
值越大 圆角越圆
②。border-radius: 20px 50px;【两个值表示 第一值表示左上角和右下角的圆角大小 第二个值表示 右上角和左下角的圆角大小 （🔺 是对角关系）】
③。 border-radius: 10px 30px 50px; 【三个值表示 第一个值表示左上角的圆角大小 第二个值表示右上角和左下角的圆角大小（🔺 是对角关系）第三个值表示右下角的圆角大小 】
④。圆形 ：
利用border-radius属性制作圆形的两个要点 ：元素的宽度和高度必须相同，圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%，border-radius: 150px;四个角都是50%。 border-radius: 50%;
二。内外阴影
①。 box-shadow: inset 50px 95px 10px #06c;
box-shadow:inset x-offset y-offset blur-radius color;
inset 阴影类型内阴影
outset 阴影类型外阴影 （🔺把inset删除 默认就是outset 外阴影模式）
x-offset X轴位移，指定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径阴影向外模糊的模糊范围
color 阴影颜色，定义绘制阴影时所使用的颜色
②。box-shadow: 50px 95px 10px #06c;
三。 .box{ width: 200px; height: 400px; background: url(./imgs/bg.jpg) no-repeat; border:1px solid red; length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。 background-size: 200px 400px;
🔺如果只给出一个值，第二个是设置为"auto(自动)"
background-size: 200px;
将计算相对于背景定位区域的百分比。
第一个值设置宽度，第二个值设置的高度。
★会覆盖背景定位区域 但是图片会全部出现展示出来 不会保持纵横比
background-size: 100% 100%;
🔺如果只给出一个值，第二个是设置为"auto(自动)"
background-size: 100%;
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
★会保持纵横比 会覆盖背景定位区域 但是图片会出现展示不全
background-size:cover;
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
★会保持纵横比 图片会全部展示出来 不会完全覆盖背景定位区域
background-size:contain;
四。
①。 .box { width: 200px;
height: 400px;
background: url(./imgs/bg.jpg);
border:10px dashed rgba(240,58,23,0.5);
padding:20px;
🔺背景图像会贴着内边距的内部来展示 也是默认的
background-origin:padding-box;
🔺背景图像会贴在边框的内部来展示
background-origin:border-box;
🔺背景图像会贴在内容的内部来展示
background-origin:content-box;}
②。{width: 200px; height: 400px;
background: url(./imgs/bg.jpg);
border:10px dashed rgba(240,58,23,0.5);
padding:20px;
背景被裁剪到内边距框
🔺background-clip背景图在padding之外的部分会被剪裁 而background-origin不会background-clip:padding-box;
背景被裁剪到边框盒
🔺 在背景图重复出现的时候background-clip不会在边框的内容展示，会在 边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了 background-clip:border-box;
背景被裁剪到内容框
🔺背景图片还是在padding的内部位置，在文本外的区域会被剪裁掉 background-clip: content-box; }
