文字描边效果

于 2024-07-21 09:45:00 发布
阅读量75 收藏
点赞数 2
分类专栏： 开发问题 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59855825/article/details/140578654
版权

在这里插入图片描述
文字描边效果可以通过text-shadow来实现，也可以通过-webkit-text-stroke来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字描边效果</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-container{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 100vh;
            background: linear-gradient(45deg, #e45c08, #1309d7); /* 从左上到右下的渐变 */
        }
        .text{
            font-size: 100px;
            font-weight: 1500;
            /* 这种方式也能实现但是不支持文字透明 */
            /* text-shadow: 
            0 2px #fff,
            0 -2px #fff,
            -2px 2px #fff,
            2px -2px #fff,
            -2px 0 #fff,
            2px 0 #fff; */

            /* 这种方式支持文字透明，但是兼容性可能有问题 */
            -webkit-text-stroke: 2px #fff;
            color: transparent;
        }
    </style>
</head>
<body>
    <div class="text-container">
        <span class="text">哀吾生之须臾，羡长江之无穷</span>
    </div>
    
</body>
</html>
小圳圳
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dw文字描边效果
10-09
dw文字描边效果 span { position:absolute; padding:4px; filter: Dropshadow(offx=1,offy=0,color=white) Dropshadow(offx=0,offy=1,color=white) Dropshadow(offx=0,offy=-1,color=white) Dropshadow(offx=-1,...
用css滤镜实现的文字描边效果的代码
10-30
用css滤镜实现的文字描边效果的代码 在CSS中，实现文字描边效果可以通过使用滤镜来实现。滤镜（Filter）是CSS的一个属性，它可以对元素应用视觉效果。下面我们将详细介绍如何使用CSS滤镜实现文字描边效果。 首先，...
html文字加描边效果,CSS3实现文字描边效果
weixin_35702787的博客
06-04 394
以前想实现文字描边效果只能用PS制作图片，现在我们可以用CSS3就可以实现文字描边效果其实，不用图片还可以文字描边哦，下面看青岛星网的实现方式。CSS3实现文字描边效果，这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果。给需要实现文字描边的元素添加如下CSS3的属性-webkit-text-shadow:#0001px00,#00001px0,#000-1px...
CSS实现文字描边效果
weixin_45092437的博客
08-14 2万+
文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
Java文字描边效果实现
benben044的专栏
09-18 996
java的Graphics2D工具中实现文字描边效果
CSS3文字描边效果
热门推荐
小朱的专栏
09-25 3万+
CSS3 文字描边
Android自定义View实现简单文字描边功能
08-26
文字描边是一种常见的UI效果，即在文字周围绘制一个边框，以突出文字的效果。在Android中，可以使用Paint类的setStrokeWidth和setStrokeColor方法来实现文字描边功能。 四、实例代码分析 在给定的代码中，...
unity实现描边效果
10-12
在unity中实现物体描边的效果，亲测可用。
android文字描边功能的实现
09-01
本文将详细介绍如何在Android应用中实现文字描边功能，主要涉及的技术点包括自定义View、TextView的扩展以及Paint对象的使用。 首先，为了实现文字描边，我们需要创建一个新的TextView子类，例如这里创建了一个名为...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1342
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 747
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 597
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
拖拽上传（预览图片）
最新发布
喵喵的博客
07-18 392
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Html_Css问答集(11)
白话魔法师
07-16 850
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 766
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 366
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 179
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
css list布局 高端玩法
qq_27806371的博客
07-18 261
css list布局 高端玩法
html实现文字描边效果
05-25
在 HTML 中实现文字描边效果可以使用 CSS 的 text-shadow 属性。可以将 text-shadow 设置为多个值来创建描边效果，例如： ```css text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; ``` 这个样式会在每个文字周围添加一层黑色的阴影，从而实现描边效果。可以根据需要调整阴影的位置和颜色。 另外，还可以通过使用伪元素 ::after 和 ::before 来为文字添加描边效果，例如： ```css h1 { position: relative; font-size: 3em; } h1::after, h1::before { content: attr(title); position: absolute; left: 0; top: 0; color: white; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; } ``` 这个样式会将 H1 元素的标题内容复制到 ::after 和 ::before 伪元素中，并在每个伪元素周围添加一层黑色的阴影，从而实现描边效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值