文本特效和文本省略号

text-shadow完成字体特效

<!DOCTYPE html>
<html>
  <head>
    <title>字体特效：发光字、阴影字、3D效果</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <style typ="text/css">
      body {
        background-color:rgb(24, 23, 23);
        text-align:center;
        font-size:50px;
      }
      .content div {
        margin:50px;
      }
      .content>div:nth-child(1){
        color:#fff;
        text-shadow:0px 0px 20px rgb(250, 79, 79);
      }
      .content>div:nth-child(2){
        font-weight:bold;
        text-shadow:3px 3px 5px #fff;
      }
      .content>div:nth-child(3){
        color:#fff;
        text-shadow:1px 1px rgba(241,246,246 ,0.6),
                    2px 2px rgba(241,246,246 ,0.6),
                    3px 3px rgba(241,246,246 ,0.6),
                    4px 4px rgba(241,246,246 ,0.6),
                    5px 5px rgba(241,246,246 ,0.6);
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div>美好的感觉</div>
      <div>慷慨解囊</div>
      <div>愈演愈烈</div>
    </div>
  </body>
</html>

效果

文本省略号

<!DOCTYPE html>
<html>
  <head>
    <title>长文字省略号效果</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <style typ="text/css">
      .content {
       width:280px;
       background-color:lightsalmon;
       margin:60px auto;
      }
      .content p {
        padding:20px;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space:nowrap;
      }
    </style>
  </head>
  <body>
    <div class="content">
     <p>没有人会告诉你，按部就班就是完美无缺的，至少是需要检验的！</p>
    </div>
  </body>
</html>

效果

本文作者： moofing

本文链接： https://moofing.gitee.io/posts/38919.html

更新于 2020-11-30

CSS3 # text-shadow # text-overflow # white-space