CSS 模板效果

Stencil 效果是近十年来出现的经典文本效果。这种类型的效果通常用于用户界面不是主要关注点的网站。这种设计的例子可以在电影下载网站上找到，其中界面不是最好看的，因为主要关注的是网站的工作。网站的开发者可能不想在设计和构建一个好看的网站上浪费资源。

方法：方法是使用webkit-stroke CSS 属性在文本周围创建笔画/轮廓。

HTML 部分：在此部分中，声明了必须设置样式的文本。对于此示例，文本在标题标记中声明。

html

  
  


  
Geeks

CSS 部分：按照以下步骤制作所需的模板效果：

• 第 1 步：根据需要对文本应用基本样式，如字体大小、系列或颜色。还可以将文本转换为大写，以获得更好的可见性。
• 第 2 步：使用-webkit-text-fill-color属性使文本透明。这可以通过将属性设置为“透明”来完成。
• 步骤3：使用-webkit-text-stroke-width属性设置文本的笔触或轮廓的宽度。可以使用合适的单位将此属性设置为所需的值。  

提示：建议保持尽可能低的宽度，使文字看起来更赏心悦目。

CSS

h1 {
  font-family: sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 6em;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
}

完整代码：是以上两段代码的组合。

HTML

  

    
  
    

  

  
    
    
Geeks

  

输出：