08盒子阴影.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> h1 { font-size: 90px; text-shadow: 10px 3px 3px rgba(0,0,0,0.5); color: red; } div { width: 200px; height: 200px; border: 10px solid red; /* 水平位置 垂直位置 模糊距离 阴影颜色*/ box-shadow: 10px 15px 30px rgba(0,0,0,0.4) inset; } </style> </head> <body> <h1>我们一定可以高薪</h1> <div></div> </body> </html>
09水晶图片.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 249px; height: 249px; line-height: 249px; text-align: center; border-radius: 50%; margin: 100px; background-color: pink; background: url(shui.jpg) 0 0 no-repeat; font-size: 30px; color: rgba(255,255,255,0.7); box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset, 5px 4px 10px rgba(0,0,0,0.3); } </style> </head> <body> <div>水晶图片</div> </body> </html>