如何使用 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;
}