Question

我正在尝试找出创建三个284x87圆角矩形框的最佳方法，它将在左侧包含一个图标，在右侧包含文本。是否值得尝试用CSS完全取消它，或者没有办法摆脱使用图像？这是我到目前为止所使用的整个图像的背景图像：

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

Answer 1

你当然可以使用CSS。正如cale_b所说，设置一个具有适当位置的背景图像，然后调整左边的填充，使文本不与图标重叠。这是合适的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 center规则中的

background将图像从左边缘设置为4px并垂直居中。左边的填充设置为24px，以使文本远离背景图标

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

尺寸明显可调，以满足您的需求

创建三个圆角矩形框，左侧包含图标，右侧包含文本

1 个答案: