<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { text-align: center; font-size: 100px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; margin-top: 100px; font-weight: 700; /* text-shadow: 水平位移 垂直位移 模糊程度 颜色 */ text-shadow: 3px 3px 3px red; /* text-shadow 可以并列多个 */ /* text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000; */ } </style> </head> <body> <p>苍茫的天涯我的爱！</p> </body> </html>
- 凹凸文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #ccc; } p { text-align: center; font-size: 90px; margin-top: 50px; font-weight: bold; color: #ccc; } .tu { /* text-shadow 可以并列多个 */ text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000; } .ao { /* text-shadow 可以并列多个 */ text-shadow: -1px -1px 0 #000, 1px 1px 0 #fff; } </style> </head> <body> <p class="tu">总有刁民想害朕</p> <p class="ao">总有刁民想害朕</p> </body> </html>
