HTML+CSS 文本特效

最新推荐文章于 2024-04-30 19:13:23 发布

MrLc666

最新推荐文章于 2024-04-30 19:13:23 发布

阅读量10w+

点赞数 2

分类专栏： HTML 文章标签： html

本文章博主原创，希望对你有所帮助。

本文链接：https://blog.csdn.net/sakenc/article/details/91979885

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

test1

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p {
            text-align: center;
            font: bold 60px helvetica, arial, sans-serif;
            color: #fff;
            text-shadow: black 0.1em 0.1em 0.2em;
        }
    </style>
</head>
<body>
    <p>文本阴影：text-shadow</p>
</body>
</html>

test2


p {
     text-align: center;
     font: bold 60px helvetica, arial, sans-serif;
     color: red;
     text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
  }

Test3

  p {
      text-align: center;
      font: bold 60px helvetica, arial, sans-serif;
      color: red;
      border: solid 1px red;
      text-shadow: 0.5em 0.5em 0.1em #600, -1em 1em 0.1em #060, 0.8em -0.8em 0.1em #006;
    }

test4

p {
     text-align: center;
     font: bold 60px helvetica, arial, sans-serif;
     color: red;
     text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
   }

test5


        p {
            text-align: center;
            padding: 24px;
            margin: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 80px;
            font-weight: bold;
            color: #D1D1D1;
            background: #CCC;
            text-shadow: -1px -1px white, 1px 1px #333;
        }

test6

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

test7

p {
    text-align: center;
    padding:24px;
    margin:0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background:#CCC;    
    text-shadow: -1px 0 black, 
        0 1px black,
        1px 0 black, 
        0 -1px black;
}

test8

p {
    text-align: center;
    padding:24px;
    margin:0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background:#CCC;    
    text-shadow: 0 0 0.2em #F87,
        0 0 0.2em #F87;
}

有没有喜欢的哪一种呢

MrLc666

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 文本特效

test1<!doctype html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> p { text-align: cente...
复制链接

扫一扫