1

我试图找出创建三个 284x87 圆角矩形框的最佳方法,其中左侧包含一个图标,右侧包含文本。是否值得尝试纯粹使用 CSS 来实现这一点,还是没有办法摆脱使用图像?这是我到目前为止所拥有的,使用整个图像的背景图像:

<style type="text/css">
.blurect {
    background-image: url(blurect1.gif);
    width: 284px;
    height: 87px;
    color: #FFF;
    }
</style>
<div class="blurect">Test</div>
4

1 回答 1

2

你当然可以使用 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;
}​

4px centerbackground规则中将图像设置为距左边缘 4px 并垂直居中。左侧填充设置为 24px 以将文本从背景图标移开

这是一个演示:http: //jsfiddle.net/6p8Rz/

尺寸显然可以调节以满足您的需求

于 2012-06-25T14:31:02.423 回答