css文字描边效果

最新推荐文章于 2023-05-05 16:57:05 发布

CN-cheng

最新推荐文章于 2023-05-05 16:57:05 发布

阅读量1.6k

点赞数 3

分类专栏：小效果文章标签： css 文字描边 text-shado

本文链接：https://blog.csdn.net/github_37125043/article/details/72154704

版权

小效果专栏收录该内容

14 篇文章 0 订阅

订阅专栏

突然想到这个东西，然后写下来留个纪念，方法也很简单。

文章目录

效果如下：

CSS代码

主要利用的是文本阴影效果：text-shadow。
text-shadow兼容性：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持

<style>
    .content {
        font-size:50px; /*字体大为了明显显示效果*/
        text-shadow: 0 0 1px #63a35c; /*描边颜色自己定义*/
        color:#fff; /*字体颜色白色，看着有镂空效果*/

    }
</style>

HTML代码

<div class="content">中文描边效果</div>

全部代码

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文字描边效果</title>
    <style>
        .content {
            font-size:50px; /*字体大为了明显显示效果*/
            text-shadow: 0 0 1px #63a35c; /*描边颜色自己定义*/
            color:#fff; /*字体颜色白色，看着有镂空效果*/
        }
    </style>
</head>
<body>
    <div class="content">中文描边效果</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CN-cheng

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css文字描边效果

突然想到这个东西，然后写下来留个纪念，方法也很简单。CSS代码HTML代码效果如下： CSS代码主要利用的是文本阴影效果：text-shadow。 text-shadow兼容性：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 <style> .content { font-size:50px; /*
复制链接

扫一扫