當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端HTML5css3阴影凹凸文字

發(fā)布時間：2024/1/23 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了前端HTML5css3阴影凹凸文字小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>body {background-color: red;}div {width: 600px;height: 300px;text-align: center;line-height: 300px;font-size: 80px;font-weight: 900;color: red; /*文字顏色必須和背景同色*/}.tu {/* text-shadow: 右下 +, 左上-;*//*text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;*//*text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;*/text-shadow:-2px -2px 2px #fff,2px 2px 2px #000;/*#000是黑色 #fff是白色凸上白下黑凹上黑下白*//*text-shadow :向右移動向下移動模糊的距離顏色*/}.ao {/*text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;*/text-shadow:-2px -2px 2px #000,2px 2px 2px #fff;}</style> </head> <body><div class="tu">我是凸起來</div> <div class="ao">我是凹下去</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>body {background-color: #efefef;}.box {width: 300px;height: 200px;margin: 100px auto;background-color: white;font-size: 50px;line-height: 200px;text-align: center;/**/text-shadow: 1px 1px 1px red;box-shadow: 40px 30px 50px 0px rgba(0,0,0,0.2) inset;}.box:hover {box-shadow: 40px 30px 50px 0px rgba(0,0,0,0.2) inset;/*默認(rèn)是外部陰影outset 變成內(nèi)部陰影要在后面加上inset內(nèi)部陰影和外部陰影只能有一個*/}</style> </head> <body> <div class="box">文字陰影 </div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的前端HTML5css3阴影凹凸文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。