master

分支 (1)

管理

管理

master

h5-c3
/
back-origin-clip的使用.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>box-sizing的使用</title>
		<style>
			.main .box {
				background-color: #ffeaa7;
				width: 100px;
				height: 100px;
				margin: 10px;
				padding: 10px;
				border: 10px dotted #48dbfb;
				display: inline-block;
				background-image: url(images/02.png);
				background-size: 40px;
				background-repeat: no-repeat;
			}

			.main .box:nth-of-type(1) {
				background-origin: border-box;
				background-clip: border-box;
			}

			.main .box:nth-of-type(2) {
				/* 默认值 */
				/* 更改背景图片的原点 */
				background-origin: padding-box;
				/* 默认值 */
				/* 裁切背景图片 */
				background-clip: border-box;
			}

			.main .box:nth-of-type(3) {
				background-origin: content-box;
				background-clip: content-box;
			}

			.main .box:nth-of-type(4) {
				background-origin: border-box;
				background-clip: border-box;
			}

			.main .box:nth-of-type(5) {
				background-origin: border-box;
				background-clip: padding-box;
			}

			.main .box:nth-of-type(6) {
				background-origin: border-box;
				background-clip: content-box;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<!-- background-origin的使用，用于定义背景图片的原点位置 -->
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<!-- background-clip的使用 -->
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</body>
</html>