文本阴影或与 <ul> 项目符号类似的效果？答案

【问题标题】：Text-shadow or similar effect to a <ul> bullet?文本阴影或与 <ul> 项目符号类似的效果？
【发布时间】：2012-12-09 11:58:15
【问题描述】：

正如标题所说，我正在尝试找到一种方法来为子弹添加文本阴影效果。我正在使用 text-shadow 来显示一些文本后面的光晕，我想为子弹实现同样的效果，而不必创建自己的子弹图像。

【问题讨论】：

标签： css glow

【解决方案1】：

试试这个

ul {
  list-style: none;
}

li:before {
  content: '\2022';
  padding: 10px;
  text-shadow: 1px 1px 2px red;
}

http://jsbin.com/apoviv/2/edit

UPD：你真的可以使用 unicode charachtest 来处理特殊符号，这很棘手，但有一篇很好的文章可以帮助http://css-tricks.com/css-content/

【讨论】：

这会创建一个阴影，但我得到的不是子弹，而是一个问号块。那个简单的子弹还有其他语法或声明吗？
是的，这应该是一个棘手的问题。我只是快速复制粘贴，您可能可以寻找text symbols
好吧，根本不是这样的灾难，还有另一篇感兴趣的相关文章alanhogan.com/tips/css/special-characters-in-generated-content
好吧，它似乎不适用于子弹的十六进制。我正在尝试内容：“\u2022”； .另外，我用示例中的符号进行了尝试，它确实有效，但符号没有应用文本阴影
@ejfrancis，这很奇怪，它对我都有效。实际上它应该是 '\2022' 没有字母 u 只有数字

【解决方案2】：

您最好的选择是使用伪元素插入一个项目符号和一个项目符号（• 或任何其他适合您的）。由于它是文本内容，因此 text-shadow 可以完美地处理它

这是一个示例 - http://dabblet.com/gist/4356335 - 带有一些额外的样式以使插入的项目符号起作用。

【讨论】：

【解决方案3】：

另一种选择是使用纯 CSS 项目符号。像这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>CSS Bullets</title>
        <style type="text/css" media="screen">

            html, body {
            font-size: 16px; 
        }

        article ul li {
            position:relative;
            overflow:hidden;
            list-style:none;
            padding-left:20px;
            line-height: 1.35em;
            margin: 0 0 .5em 0;
        }

        article li:before {
            margin:-8px 0 0;
            background:#ededed;
            overflow:hidden;
            list-style:none;
            content:"";
            position:absolute;
            top:0.95em;
            left:0;
            width:7px;
            height:7px;
            border-radius:2px;
            -webkit-border-radius:2px;
            -moz-border-radius:2px;
            box-shadow: 1px 1px 5px #888888;
        }
        </style>
    </head>
<body>
    <article>
        <ul>
            <li>Bullet 1</li>
            <li>Bullet 2</li>
            <li>Bullet 3</li>
        </ul>
    </article>
</body>
</html>

【讨论】：