10

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

4

3 回答 3

15

试试这个

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/

于 2012-12-21T22:41:03.450 回答
2
于 2012-12-21T22:42:13.743 回答
2

Another option would be to to use pure CSS bullets. Something like this:

<!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>
于 2013-04-08T22:01:26.360 回答