CSS3学习笔记1-选择器和新增属性 - xinyiyake(2)_H5之家

语法 box-shadow：水平偏移垂直偏移模糊大小阴影大小颜色阴影

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: green; margin: 10px auto; } /* 第一个值：Npx 阴影向水平方向偏移N个像素正数往右负数往左 */ div:nth-child(1){ box-shadow: -10px 0; } /* 第二个值：Npx 阴影向垂直方向偏移N个像素正数往下负数往上 */ div:nth-child(2){ box-shadow: 0px -10px; } div:nth-child(3){ box-shadow: 10px 10px; } /* 第三个值：羽化大小（模糊的大小） */ div:nth-child(4){ box-shadow: 10px 10px 50px; } /* 第四个值：阴影尺寸 */ div:nth-child(5){ box-shadow: 0px 0px 10px 5px; } /* 第五个值：颜色默认值是黑色 */ div:nth-child(6){ box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5); } /* 第六个值内外阴影默认是外阴影内阴影是inset */ div:nth-child(7){ box-shadow: 0px 0px 10px 5px red inset; } /* 阴影可以写多组用逗号隔开*/ div:nth-child(8){ box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue; } div:nth-child(9){ box-shadow: 5px 5px red; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html> 边框图片border-image（了解，有兼容性问题，同时效果难做）

以九宫格的方式来切割图片，然后把每部分图片平铺作为边框。

值说明：

背景图片系列（重点） 1.背景图片的基准点

background-origin：值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/heihei.jpg) 0 0 no-repeat; /* padding-box 默认取值，从padding的起始点开始平铺 padding的大小不会产生影响*/ /* border-box 从border的起始点开始平铺 border的大小不会产生影响 */ /* content-box 从内容的起始点开始平铺，会留出padding的位置 */ background-origin: content-box; padding: 20px; } </style> </head> <body> <div class="box"></div> </body> </html> 2.多重背景