css中如何给字体加描边(2)-木庄网络博客

当前第2页返回上一页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .demo1 {
        color: white;
        font-size: 40px;
        text-shadow: -1px 1px 0 #000, 1px 1px 0 #000;
      }
      .demo2 {
        color: white;
        font-size: 40px;
        text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000,
          -1px -1px 0 #000;
      }
    </style>
  </head>
 
  <body>
    <p class="demo1">为你明灯三千</p>
    <p class="demo2">为你花开满城</p>
  </body>
</html>

效果图：

57WS21}XTIUIF212`X9`RT5.png

方法2：使用text-stroke属性

text-stroke属性用于向文本添加描边。此属性可用于更改文字的描边宽度和颜色。使用-webkit-前缀支持此属性。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .demo {
        color: white;
        font-size: 40px;
        -webkit-text-stroke: 1px rgb(250, 190, 255);
      }
    </style>
  </head>
 
  <body>
    <p class="demo">为你明灯三千</p>
  </body>
</html>