HTML5网页设计基础——播放器图标
生活随笔
收集整理的這篇文章主要介紹了
HTML5网页设计基础——播放器图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
案例：
參考代碼:?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title><style>*{margin: 0;padding: 0;}.wai{margin: 50px auto;width: 300px;height: 253px;border:1px solid;background: linear-gradient(0deg,#99627b,#ccadce,#62426c);}.one{margin: 50px auto;width: 150px;height: 125px;background: linear-gradient(0deg,#492646,#945278);border-radius: 20px;padding-top: 25px;}.two{margin:auto;width: 100px;height: 65px;border: 10px solid #000;background: linear-gradient(350deg,#a85a67,#fab097);border-radius: 20px;padding-top:15px;}.three{margin:auto;width: 45px;height: 43px;border-radius:25px;background: white;padding-top:7px;padding-left:5px;}.four{margin: auto;width: 0;height: 0;border: 18px solid #000;border-left: 25px solid #000;border-right:none;border-top-color: transparent;border-bottom-color: transparent;}</style> </head><body><div class="wai"><div class="one"><div class="two"><div class="three"><div class="four"></div></div></div></div></div> </body> </html>總結
以上是生活随笔為你收集整理的HTML5网页设计基础——播放器图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP正则表达式方面小笔记
- 下一篇： 服务器：Nginx - 最小配置说明