目录
1 背景
1.1 设置背景图片的定位
1.2 背景裁切-规定背景的绘制区域
1.3 设置背景图片尺寸
2 边框
2.1 盒子阴影box-shadow
2.2 边框图片border-image
3 文本 -文字阴影text-shadow
1 背景
1.1 设置背景图片的定位
background-origin：规定背景图片的定位区域。（就是将图片的原点定位到下面三种方式中，设置未平铺）
☞ padding-box 背景图像相对内边距定位（默认值）
☞ border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
☞ content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】备注：
1. 默认盒子的背景图片是在盒子的内边距左上角对齐设置。content-box ：
border-box ：
padding-box：
代码：
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;border: 10px dashed red;margin: 50px auto;padding: 30px;background-image: url("1.png");background-repeat: no-repeat;/* background-origin: content-box; *//* background-origin: border-box; */background-origin: padding-box;}</style> </head><body><div class="box"></div> </body>
1.2 背景裁切-规定背景的绘制区域
background-clip： 规定背景的绘制区域。（将图片放在下面三个区域内，设置平铺）
☞ border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
☞ padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
☞ content-box 背景被裁切到内容区域【将背景图片在内容区域显示】content-box ：
padding-box ：
border-box：
代码：
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;border: 20px dashed red;padding: 20px;margin: 50px auto;background: url(1.png);/* background-clip: content-box; *//* background-clip: padding-box; */background-clip: border-box;}</style> </head><body><div class="box"></div> </body>
1.3 设置背景图片尺寸
background-size： 规定背景图片的尺寸。
☞ cover
☞ contain直接设置图片大小与div容器宽高相等（图片失真）
cover：将背景图片按照原图片的缩放比，将整个容器铺满（图片显示不完整）
contain：将背景图片按照原来的缩放比，完整的显示到容器中（容器可能未填充满）
代码：
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.one {width: 200px;height: 200px;border: 1px solid red;background: url("2.jpg") no-repeat;/* 设置背景图片大小 *//* background-size: 200px 200px; *//* 将背景图片按照原来的缩放比，将整个容器铺满*//* background-size: cover; *//* 将背景图片按照原来的缩放比，完整的显示到容器中 1. 不确定是否会将容器填充满*//* background-size: contain; */}</style> </head><body><div class="one"></div> </body>
2 边框
box-shadow： 盒子阴影
0px （x）0px （y) 10px（模糊度） red
border-radius： 边框圆角border-image: 边框图片
2.1 盒子阴影box-shadow
样例：
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {width: 200px;height: 200px;border: 1px solid red;border-radius: 10px;/*设置圆角*//* 第一个0px 代表阴影在水平方向的偏移量（正数向右，负数向左）第二个0px代表阴影在垂直方向的偏移量（正数代表向下，负数代表向上）第三个10px代表阴影的模糊度 （不能设置负数）设置多个阴影，使用逗号隔开*/box-shadow: 0px 0px 10px red,5px -5px 10px blueviolet;}</style> </head><body><div class="box"></div> </body>
2.2 边框图片border-image
border-image: 边框图片
平铺方式：stretch（拉伸）
平铺方式：round（全是完整的爱心）
平铺方式：repeat （在边角处存在不完整的爱心）
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {width: 347px;height: 300px;border: 20px solid red;margin: 50px auto;/* 设置边框图片 */border-image-source: url("2.png");/* 边框图片裁切 : 不需要带单位*/border-image-slice: 20;/* 设置边框图片的平铺方式 *//* border-image-repeat: stretch; */border-image-repeat: round;/* border-image-repeat: repeat; */border-image-width: 20px;}</style> </head><body><div class="box">1111</div> </body>
border-image-source:
这个属性指定了边框图片的URL。在这个例子中，它指向了名为 "2.png" 的图片。border-image-slice:
这个属性定义了边框图片如何被裁切。当值为20时，这意味着图片将被从四个角各裁切20像素的宽度/高度，形成9个区域：四个角、四条边和一个中心区域（虽然中心区域通常不会被使用在边框中）。注意：如果图片的尺寸不足以裁切这么多像素，那么结果可能会不可预测或不好看。
border-image-repeat:
这个属性定义了边框图片如何被平铺（或缩放）以填充边框区域。使用round，这意味着图片会被缩放（但保持其宽高比）以完整地适应边框的宽度和高度，但可能会留下一些空隙（如果边框的尺寸不能被图片尺寸整除）。如果你选择
stretch，图片会被拉伸以完全填充边框，这可能会导致图片失真。如果你选择
repeat，图片会被重复以填充边框，但如果边框的尺寸不能被图片尺寸整除，那么图片的最后一部分可能会被截断。border-image-width:
这个属性定义了边框的宽度。你设置了20px，这意味着边框将使用裁切后的图片，其宽度为20像素。注意：虽然已经设置了
border: 20px solid red;，但在使用border-image时，border-width实际上是由border-image-width控制的。
3 文本 -文字阴影text-shadow
☞text-shadow： 设置文本阴影（跟盒子阴影差不多）
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {font-size: 100px;text-align: center;padding-top: 100px;text-shadow: 0px 0px 10px red,1px -1px 10px blue;}</style> </head> <body><div>文字阴影</div> </body>
