目录
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>
