/* 可以设置多个阴影 */ box-shadow: 10px 10px 5px #888888, -10px -10px 5px red; 兼容性 -webkit-boxshaow: -moz- -o- 用谷歌浏览器就不写了 /* 平铺显示 */ /* 值越大显示的越密 */ border-image:url(border.png) 30 30 round; /* 拉伸显示 */ border-image:url(border.png) 30 30 stretch; /* 多个背景图片 */ #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } 背景裁剪 div { background-clip: content-box; /* 从内容区域显示 不包括padding border */ background-clip: padding-box; /* 从内边距padding开始显示 不包括border边框 */ } div { /* 背景图片大小设置 */ background-size: 10px 20px; } div { border:1px solid black; padding:35px; background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; /* 如果你设置了padding 在设置这个属性就会让背景图片在内容区域显示 */ background-origin: content-box; background-origin: padding-box; /* 在padding区域显示 */ }
1 - box-shadow
2 - border-imag
3 - 多个背景 多重设置