我正在尝试找出创建三个 284x87 圆 Angular 矩形框的最佳方法,它们将在左侧包含一个图标,在右侧包含文本。是否值得尝试纯粹使用 CSS 来实现这一目标,还是没有办法摆脱使用图像?这是我到目前为止所拥有的,使用整个图像的背景图像:
<style type="text/css">
.blurect {
background-image: url(blurect1.gif);
width: 284px;
height: 87px;
color: #FFF;
}
</style>
<div class="blurect">Test</div>
最佳答案
您当然可以使用 CSS。正如 cale_b 所说,在适当的位置设置背景图像,然后调整 padding-left 以使文本不与图标重叠。这是合适的 CSS:
.rect {
background: url(path/to/image.png) 4px center no-repeat;
padding: 4px 4px 4px 24px;
width: 200px;
height: 20px;
line-height: 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
background
规则中的 4px center
设置图像距左边缘 4px 并垂直居中。左边距设置为 24px 以将文本从背景图标移开
这是一个演示: http://jsfiddle.net/6p8Rz/
尺寸显然可以根据您的需要进行调整
关于css - 创建三个圆 Angular 矩形框,左边是图标,右边是文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11190312/