如何用CSS突出显示小部件标题？

Question

我正在编辑一个Wordpress主题，我想用在我的博客。我想突出显示这个页面中小部件的标题：http://nathanandaudrey.org/

例如。http://i.imgbox.com/dh0hApE4.jpg

我试过了

.widget-title { background: #e1e1e1;}

但这会改变整行的颜色，我只想突出显示文本。有人知道我是否以及如何使用CSS实现同样的效果？提前谢谢。

示例html；

<aside id="recent-posts-2" class="widget widget_recent_entries">
    <h3 class="widget-title">Recent Posts</h3>
    <ul>
        <li></li>
    </ul>
</aside>

Answer 1

由于您没有提供任何html，所以这是一个猜测。在标题元素上使用display: inline-block；

​

.widget {
  width: 400px;
  height: 200px;
  background-color: #666;
}
.widget h3 {
  background-color: #e1e1e1;
  padding: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

<aside id="recent-posts-2" class="widget widget_recent_entries">
	<h3 class="widget-title">Recent Posts</h3>
	<ul>
		<li>foo bar</li>
	</ul>
</aside>

​

默认情况下，div元素是块--这意味着它们跨越容器的全部宽度，如果您将其更改为display: inline-block，则此更改仅适合div本身中的内容。

Answer 2

请使用下面的代码。

 .widget-title {
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #FFF;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
}