Hiệu ứng bóng đổ trong css3
RUN
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*Bóng đổ không có độ nhòe*/ .shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: 3px 3px #666; } /*Bóng đổ sang phải*/ .shadow-right { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: 3px 3px 5px 0px #666; -webkit-box-shadow: 3px 3px 5px 0px #666; box-shadow: 3px 3px 5px 0px #666; } /*Bóng đổ sang trái*/ .shadow-left { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: -3px -3px 5px 0px #666; -webkit-box-shadow: -3px -3px 5px 0px #666; box-shadow: -3px -3px 5px 0px #666; } /*Bóng đổ vào trong*/ .inset-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } /*Bóng đổ một cạnh của khung*/ .one-edge-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; } /*Kết hợp bóng đổ cả bên trong và bên ngoài*/ .inset-outset-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: inset 10px 10px 5px #666, 10px 10px 5px #666; } /*Tạo nhiều bóng đổ*/ .multi-shadow { width: 100px; height: 50px; margin: 50px 40px; background-color: #ccc; box-shadow: 0 0 10px 4px #FF6347, 0 0 10px 30px #FFDAB9, 30px 0 20px 30px #B0E0E6; } </style> </head> <body> <div class="shadow"></div> <div class="shadow-right"></div> <div class="shadow-left"></div> <div class="inset-shadow"></div> <div class="one-edge-shadow"></div> <div class="inset-outset-shadow"></div> <div class="multi-shadow"></div> </body> </html>
PHÓNG TO