box-shadow
box-shadow:水平偏移+- 垂直偏移+- 模糊度+ 向外扩展+ 阴影颜色 向内或者向外(inset)默认向外;
<div class="boxShadow"> <a href="#" class="a1">简单的偏移阴影</a> <a href="#" class="a2">偏移模糊阴影</a> <a href="#" class="a3">外发光效果</a> <a href="#" class="a4">内阴影</a> <a href="#" class="a5">盒子阴影可以嵌套,依次往后叠加,就是第一个是在最上层。</a> <a href="#" class="a6">可以制作高光</a> <a href="#" class="a7">高光、内阴影、外阴影</a> </div>
a{ display:block; background-color:#F5F5F5; border:#ccc solid 1px; margin-bottom:24px;} a{ width:400px; height:40px; line-height:40px; color:#333; text-decoration:none; padding:10px; border-radius:30px;} /*------------------------------------------------------------------------------------*/ /*说明: box-shadow:水平偏移+- 垂直偏移+- 模糊度+ 向外扩展+ 阴影颜色 向内或者向外(inset)默认向外;</p>*/ .a1{ box-shadow:5px 5px 0 rgba(0,0,0,0.8);} .a2{ box-shadow:5px 5px 5px 0 rgba(0,0,0,0.8);} .a3{ box-shadow:0 0 5px 3px rgba(0,0,0,0.6);} .a4{ box-shadow:0 0 5px 3px rgba(0,0,0,0.6) inset;} .a5{ box-shadow:0 0 0 1px rgba(204,0,0,1),0 0 0 4px rgba(0,146,10,0.4);} /*第一个红色,第二个绿色*/ .a6{ box-shadow:0 1px 0 0 rgba(204,0,0,1) inset;} .a7{ background-color:#BE1C8B; box-shadow:0 6px 6px -2px rgba(255, 255, 255, 0.7) inset, 0 -5px 10px 3px rgba(0, 0, 0, 0.6) inset, 0 8px 10px 2px rgba(0, 0, 0, 0.3)}/*向外扩张貌似可以用-*/ </style>