【css3】01-css3新特性样式篇

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>