<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3阴影</title> </head> <!-- 对象阴影【box-shadow】 语法：box-shadow:投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色； 可以使用一个或多个投影，如果使用多个投影时必须用逗号，分开。 另外，还可以通过inset来设置对象的内阴影 背景颜色线性渐变【linear-gradient】 语法： background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)； 起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角 过渡色：可以插入多个，表示多种颜色的渐变 --> <style> .box-shadow{ width: 1000px; margin:0 auto; text-align: center } .box-shadow:after{ clear: both; display: block; overflow: hidden; content: " "; } .box-shadow p{ width: 100px; height: 100px; float: left; border:1px #999 solid; line-height: 100px; background-color: #f9f9f9; margin-right: 100px; font-size: 20px; } /* 外阴影 */ .box-shadow p:first-child{ /* x轴偏移量 y轴偏移量 模糊半径 扩展半径 阴影颜色（0.3t透明度） */ box-shadow: 5px 5px 3px 2px rgba(0,0,0, .3); } /* 内阴影 */ .box-shadow p:last-child{ /* x轴偏移量 y轴偏移量 模糊半径 扩展半径 阴影颜色（0.3t透明度） */ box-shadow:inset 5px 5px 3px 2px rgba(0,0,0, .3); } </style> <body> <div class="box-shadow"> <p>外阴影</p> <p>内阴影</p> </div> </body> </html>
