【CSS3】制作带光晕的网页“Button“
生活随笔
收集整理的這篇文章主要介紹了
【CSS3】制作带光晕的网页“Button“
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
靜態的界面是這樣的：
當鼠標移動到類似于Button的部分上的時候，會出現指定顏色的光暈（這里設置的顏色與模擬Button顏色一致）：
網頁源碼
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="UTF-8"><title>Red-Button</title><style>body{background:#ccc;}div{width:200px;height:50px;margin:30px auto;font-size:30px;line-height:45px;text-align:center;color:#fff;border:5px solid #fff;border-radius:10px;background:#ff421f;cursor:pointer;}div:hover{box-shadow:0 10px 40px 5px #ff421f;}</style></head><body><div>A</div><div>B</div><div>C</div><div>D</div></body> </html>總結
以上是生活随笔為你收集整理的【CSS3】制作带光晕的网页“Button“的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多个小int的乘法小心溢出哦（记洛谷P1
- 下一篇： 【CSS3】CSS3支持的颜色表示方法大