前端学习（1812）：前端调试之shadow练习
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1812）：前端调试之shadow练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
index.html
<!DOCTYPE html> <html lang="en"><head><!--系統內置 start--><script type="text/javascript"></script><!--系統內置 end--><meta charset="UTF-8"><title>練習</title><link rel="stylesheet" href="index.css"> </head><body><div class="box"><h3>小米<小愛老師></h3><p>口袋里的英語外教</p><h4>499元起</h4></div> </body></html>index.css
* {margin: 0;padding: 0; }.box {box-sizing: border-box;width: 200px;height: 256px;background: #ffffff;padding-top: 22px;text-align: center;box-shadow:0px 0px 10px rgba(0,0,0,0.11); }.box::before {content: '';display: block;width: 130px;height: 130px;margin: 0px auto 16px;background: url(./images/phone.jpg) no-repeat center;background-size: contain; }.box h3 {font-style: normal;font-weight: normal;font-size: 12px;line-height: 17px;color: #000000; }.box p {margin-top: 4px;margin-bottom: 8px;font-style: normal;font-weight: normal;font-size: 12px;line-height: 17px;color: #A8A8A8; }.box h4 {font-style: normal;font-weight: 500;font-size: 12px;line-height: 17px;color: #FD6821; }運行結果
總結
以上是生活随笔為你收集整理的前端学习（1812）：前端调试之shadow练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bbsmax mysql_mysql 数
- 下一篇： 前端学习（1812）：前端调试之shad