css3学习系列之box-shadow(1)
今天学习了关于css3的盒子阴影效果的box-shadow属性:
box-shadow的主要属性值有:
box-shadow:水平位移px 竖直位移px 模糊程度px 阴影颜色;
代码如下
<!doctype html> <html> <head> <meta charset="utf-8"/> <style> div{ width: 200px; height: 100px; margin: 100px 20px; background: #ccc; float: left; } div:nth-child(1){box-shadow:-10px -10px;} div:nth-child(2){box-shadow:10px -10px} div:nth-child(3){box-shadow:10px -10px 10px} div:nth-child(4){box-shadow:10px -10px 10px red} </style> </head> <body> <div> left-top </div> <div> left-top </div> <div> rouhe </div> <div> color </div> </body> </html>
if you don't try,you will never know!