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

[1 背景](#1 背景)

[1.1 设置背景图片的定位](#1.1 设置背景图片的定位)

[1.2 背景裁切-规定背景的绘制区域](#1.2 背景裁切-规定背景的绘制区域)

[1.3 设置背景图片尺寸](#1.3 设置背景图片尺寸)

[2 边框](#2 边框)

[2.1 盒子阴影box-shadow](#2.1 盒子阴影box-shadow)

[2.2 边框图片border-image](#2.2 边框图片border-image)

[3 文本 -文字阴影text-shadow](#3 文本 -文字阴影text-shadow)

1 背景

1.1 设置背景图片的定位

background-origin：规定背景图片的定位区域。（就是将图片的原点定位到下面三种方式中，设置未平铺）
☞ padding-box 背景图像相对内边距定位（默认值）
☞ border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
☞ content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

备注：

默认盒子的背景图片是在盒子的内边距左上角对齐设置。

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>