css之div属性box-shdow边框效果以及阴影效果
六、属性box-shadow的边框效果以及阴影效果
border border-in
shadow shadow-in shadow-write shadow-big
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0px;padding: 0px;} .hover-con{margin: 20px auto;padding:0px 20px;width:90%; text-align: center;border: 1px solid #000000;} .ech-border,.ech-border-in{ transition: all .4s; display: inline-block; margin: 20px; width: 80px; height: 80px; line-height: 80px; vertical-align: top; text-align: center; background:#E4AC00; color: #FFFFFF; cursor: pointer; } .ech-border:hover { box-shadow: 0 0 0 4px #FF0000, 0 0 1px transparent; } .ech-border-in:hover { box-shadow: inset 0 0 0 4px #FF0000, 0 0 1px transparent; } .ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{ transition: all .4s; display: inline-block; margin: 20px; width: 110px; height: 40px; line-height: 40px; text-align: center; vertical-align: top; background:#0069D9; color: #FFFFFF; cursor: pointer; } .ech-shadow:hover { box-shadow: 0 0 10px #333; } .ech-shadow-in:hover { box-shadow: inset 0 0 10px #333; } .ech-shadow-write:hover { box-shadow: inset 0 0 20px #fff; } .ech-shadow-big:hover { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); transform: scale(1.1); } </style> </head> <body> <div class="hover-con"> <span class="ech-border">border</span> <span class="ech-border-in">border-in</span> </div> <div class="hover-con"> <span class="ech-shadow">shadow</span> <span class="ech-shadow-in">shadow-in</span> <span class="ech-shadow-write">shadow-write</span> <span class="ech-shadow-big">shadow-big</span> </div> </body> </html>
DO What You Want !