css中如何给字体加描边-css教程-PHP中文网

首页

web前端

css教程

css中如何给字体加描边

醉折花枝作酒筹

May 28, 2021 pm 05:19 PM

css

给字体加描边的方法为：1、使用text-shadow属性，语法格式为“text-shadow: 水平阴影垂直阴影模糊半径颜色”；2、使用text-stroke属性，语法格式为“text-stroke: 描边宽度颜色”。

css中如何给字体加描边

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

想要使用CSS给文字添加描边效果，主要有两种方法：使用text-shadow属性或text-stroke属性。

方法1：使用text-shadow属性

text-shadow属性用于向文本添加字体边框或阴影。

语法：

text-shadow: h-shadow v-shadow blur-radius color|none;

属性值：

h-shadow：它在字体周围设置水平阴影。
v-shadow：它设置字体周围的垂直阴影。
blur-radius：设置字体周围的模糊半径。
color：它设置字体周围的颜色。
none：它没有在字体周围设置任何内容。

示例1：使用text-shadow属性为文本创建阴影

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      h1 {
        text-shadow: 0 0 5px #5eff79, 0 0 5px #ff5a5a;
      }
      h2 {
        text-shadow: 0 0 5px #ffd45e, 0 0 5px #af5aff;
      }
    </style>
  </head>
  <body>
    <h1>为你明灯三千</h1>
    <h2>为你花开满城</h2>
  </body>
</html>

效果图：

CSSHCRW380Z0VL1CZ5K)KK5.png

示例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>

效果图：

2JYS${`MT[I7PJ][1F%4%0U.png

推荐学习：css视频教程

以上是css中如何给字体加描边的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

PHP教程

1596

276

显示更多

Related knowledge

如何更改CSS中的列表样式 Aug 17, 2025 am 10:04 AM

要更改CSS列表样式，首先使用list-style-type改变项目符号或编号样式，1.使用list-style-type设置ul的项目符号为disc、circle或square，ol的编号为decimal、lower-alpha、upper-alpha、lower-roman或upper-roman，2.用list-style:none完全移除标记，3.使用list-style-image:url('bullet.png')替换为自定义图像，4.通过list-style-position:in

如何使用CSS创建响应性的推荐滑块 Aug 12, 2025 am 09:42 AM

使用纯CSS创建响应式自动轮播的推荐语滑块是可行的，只需结合HTML结构、Flexbox布局和CSS动画。2.首先构建包含多个推荐语项的语义化HTML容器，每个.item包含引用内容和作者信息。3.通过设置父容器display:flex、width:300%（三张幻灯片）并应用overflow:hidden实现横向排列。4.利用@keyframes定义从0%到-100%的translateX变换，配合animation:scroll15slinearinfinite实现无缝自动滚动。5.添加媒体

如何在CSS中创建虚线边框 Aug 15, 2025 am 04:56 AM

使用CSS创建点状边框只需设置border属性为dotted即可，例如“border:3pxdotted#000”可为元素添加3像素宽的黑色点状边框，通过调整border-width可改变点的大小，较宽的边框产生更大的点，且可单独为某一边设置点状边框如“border-top:2pxdottedred”，点状边框适用于div、input等块级元素，常用于焦点状态或可编辑区域以提升可访问性，需注意颜色对比度，同时区别于dashed的短线样式，dotted呈现圆形点状，该特性在所有主流浏览器中均被广泛

如何将CSS梯度用于背景 Aug 17, 2025 am 08:39 AM

CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo

如何使用CSS创建玻璃塑料效应 Aug 22, 2025 am 07:54 AM

要创建CSS的玻璃拟态效果，需使用backdrop-filter实现背景模糊，设置半透明背景如rgba(255,255,255,0.1)，添加细微边框和阴影以增强层次感，并确保元素背后有足够视觉内容；1.使用backdrop-filter:blur(10px)模糊背景内容；2.采用rgba或hsla定义透明背景控制通透程度；3.添加1pxsolidrgba(255,255,255,0.3)边框及box-shadow提升立体感；4.确保容器具有丰富背景如图片或纹理以呈现模糊穿透效果；5.为兼容旧浏

如何更改CSS中的光标 Aug 16, 2025 am 05:00 AM

Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol

如何在CSS中使用网格 - 板序列 Aug 22, 2025 am 07:56 AM

Grid-template-areaspropertyallowsdevelopspocrockearteeintuitive，ReadableLayoutsByDefiningNemedGridareas; everystringrepresentsarowresentsarowandeashwordeachwordaColumnCell，withGrid-areanamesonamesonameSonemaneMeAnemesonChildEllementsMatchingThoseNoseNementsMatchingTheSoseIntheTemplate，suchans'headerheaderheaderheaderheaderheaderheaderheaderheader for for for for for for

如何在CSS中添加盒子阴影 Aug 18, 2025 am 11:39 AM

要添加盒阴影，使用box-shadow属性；1.基本语法为box-shadow:水平偏移垂直偏移模糊半径扩展半径颜色内阴影；2.前三个值必填，其余可选；3.使用rgba()或hsla()实现透明效果；4.正扩展半径扩大阴影，负值缩小；5.可通过逗号分隔添加多个阴影；6.应避免过度使用，确保在不同背景上测试可见性；该属性浏览器支持良好，合理运用可提升设计质感。

See all articles

css中如何给字体加描边

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题