我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法。我显然想使用一个 div 来实现这一点,但其他解决方案也可以。重要的因素是它需要在所有浏览器中水平和垂直居中。
关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的) - 它们应该能够处理[在 ascii 绘图中] (1) 和 (1000),其中 (1000) 不是一个完美的圆,但看起来更像是一个胶囊。
EDIT:额外的限制(来自史蒂文):
- 没有 JavaScript
- 没有对表格单元格的显示属性进行修改,这是有问题的支持状态
水平居中很容易:text-align: center;
。元素内文本的垂直居中可以通过设置来完成line-height
等于容器高度,但这在浏览器之间有细微的差别。在通知徽章等小元素上,这些效果更加明显。
更好的是设置line-height
等于font-size
(或稍小)并使用填充。您必须调整身高以适应。
这是一个纯 CSS 的、单一的<div>
看起来很像 iPhone 的解决方案。它们随内容而扩展。
Demo: http://jsfiddle.net/ThinkingStiff/mLW47/ http://jsfiddle.net/ThinkingStiff/mLW47/
Output:
CSS:
.badge {
background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
box-shadow: 1px 1px 1px black;
color: white;
font: bold 15px/13px Helvetica, Verdana, Tahoma;
height: 16px;
min-width: 14px;
padding: 4px 3px 0 3px;
text-align: center;
}
HTML:
<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)