<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景处理</title>
</head>
<style>
/*背景颜色不能设置尺寸*/
/*1.背景颜色与裁切*/
/*div {*/
/* height: 500px;*/
/* border: dashed 10px black;*/
/* padding: 30px;*/
/* background-color: red;*/
/* !*不含边框，包括内边距*!*/
/* background-clip: padding-box;*/
/* !*内容区域*!*/
/* !*background-clip: content-box;*!*/
/* !*包括边框*!*/
/* !*background-clip: border-box;*!*/
/*}*/
/*2.背景重复与滚动*/
/*article {*/
/* border: 10px dashed black;*/
/* height: 500px;*/
/* overflow: auto;*/
/*}*/
/*div {*/
/* height: 3000px;*/
/* background-image: url("cat.jpg");*/
/* background-repeat: no-repeat;*/
/* background-attachment: fixed;*/
/* !*background-attachment: scroll;*!*/
/*}*/
/*3.盒子阴影使用方法*/
/*div {*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 1px solid #ddd;*/
/* box-shadow: 0 0 5px rgba(100,100,100,.2)*/
/*}*/
/*4.元素背景激变色使用*/
/*div {*/
/* height: 500px;*/
/* width: 500px;*/
/* !*线性渐变*!*/
/* !*background: linear-gradient(-45deg,red,green,blue)*!*/
/* !*background: linear-gradient(to right bottom, red, green, blue)*!*/
/* !*径向渐变*!*/
/* !*background: radial-gradient(at left bottom ,red, green, blue);*!*/
/*}*/
</style>
<body>
<!--1.背景颜色与裁切-->
<!--<div>-->
<!-- content-->
<!--</div>-->
<!--2.背景重复与滚动-->
<!--<article>-->
<!-- <div>-->
<!-- content-->
<!-- </div>-->
<!--</article>-->
<!--3.盒子阴影使用方法-->
<!--<div>-->
<!-- content-->
<!--</div>-->
<!--4.元素背景激变色使用-->
<!--<div>-->
<!-- content-->
<!--</div>-->
</body>
</html>
