css文字描边效果

来源：互联网发布：查淘宝宝贝隐形降权编辑：程序博客网时间：2024/05/18 14:25

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

- - CSS代码
  - HTML代码
  - 全部代码

效果如下：
文字描边效果

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="en"><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>

1 0