css陰影shadow
阿新 • • 發佈:2018-12-02
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list{ width:100px; height:100px; margin:20px auto; background:#eee; /* box-shadow:3px 3px 1px 1px #666; */ /* box-shadow: h-shadow v-shadow blur spread color inset; */ /* box-shadow:0px 0px 2px 2px #666; */ /* box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]# */ /* box-shadow: -12px 0 5px -5px #333; */ /* box-shadow: 12px 0 5px -5px #333; */ /* box-shadow: 0px 7px 5px -5px #333; */ /* box-shadow: 0px -7px 5px -5px #333; */ box-shadow: 100px 100px 0px 0px #333; } .shadow{ position: relative; width: 250px; height: 250px; } .shadow::before { content: ""; position: absolute; width: 50px; height: 50px; top: -50px; left: -50px; box-shadow: 50px 50px #000, 150px 50px #000, 250px 50px #000, 50px 100px #000, 150px 100px #000, 250px 100px #000, 50px 150px #000, 150px 150px #000, 250px 150px #000, 50px 200px #000, 150px 200px #000, 250px 200px #000, 50px 250px #000, 150px 250px #000, 250px 250px #000; } /* div { margin:20px; position: relative; width: 600px; height: 50px; background: hsl(48, 100%, 20%); border-radius: 20px; box-shadow: 0px -2px 10px 2px hsl(48, 100%, 20%); } div::before { content: ""; position: absolute; top: 16%; left: -2%; right: -1%; bottom: -40px; border-radius: 10px; background: hsl(48, 100%, 50%); transform: translate(0, -15%) rotate(-4deg); transform-origin: center center; /* box-shadow: 0 0 20px 15px hsl(48, 100%, 20%); */ } */ </style> </head> <body> <!-- <div class="list"> </div> --> <!-- <div class="shadow"> </div> --> <!-- <div> </div> --> <div> text </div> </body> </html>