1.圆角
语法案例：
.box {
width: 300px;
height: 300px;
border: 3px solid red;
border-radius: 150px; (按顺时针的顺序去设置)
左上角 右上角 右下角 左下角
值越大，圆角越圆
利用border-radius做一个圆
元素的宽高必须一致
圆角的半径为元素宽度的一般，或者直接设置圆角半径为50%
}
2、盒子阴影
语法box-shadow：inset（outset）x-offset y-offset blur-radius color
.box {
width: 300px;
height: 300px;
border: 3px solid red;
box-shadow: inset 5px 4px
box-shadow: inset 11px 10px 30px pink;
}
inset阴影类型内阴影 outset外阴影默认为外阴影
x-offset x轴卫衣，指定阴影水平位移量
y-offset y轴卫衣，用来指定阴影垂直位移量
blur-radius 阴影模糊半径 阴影向外模糊的模糊范围
color 阴影颜色，定义绘制阴影时所用颜色
3.背景设置
.box{
width: 200px;
height: 300px;
background-image: url(./image/bg.jpg) ;
background-repeat: no-repeat;
border:1px solid red;
background-size: 100% 100%;
如果只给一个值 第二个是auto
length 设置背景图片宽高，第一个值设置宽度，第二个值设置高度
background-size: cover;
cover会保持纵横比 会覆盖背景定位区域 但是图片展示不全
background-size: contain
会保持纵横比 不会完全覆盖背景定位区域
}
.box {
width: 200px;
height: 300px;
background-image: url(./image/bg.jpg);
border: 10px dashed red;
padding: 20px;
background-origin:padding-box;
背景图像相对于内边距来定位
背景图像会贴在内边距来展示也是默认的。
background-origin: border-box;
背景图像相对于边框盒来定位
背景图像会贴在边框的内部来展示
/* background-origin:content-box; */
/* 背景图像会贴在内容的内部来展示 */
}
.box1 {
width: 200px;
height: 300px;
background-image: url(./image/bg.jpg);
border: 10px dashed red;
padding: 20px;
background-clip: padding-box;
背景被剪裁到内边距框
在背景重复出现的时候background-clip不会在边框的内容展示 会在边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了
background-clip: border-box;
背景图像被剪裁到边框盒
background-clip: content-box;
}
