使用Div+CSS纯图片实现圆角矩形的方法小结

对于该主题，“使用Div+CSS纯图片实现圆角矩形的方法小结”，我们需要分几个方面进行讲解：

1. 理解圆角矩形的原理，确定页面需求；
2. 基于需求，使用CSS设置对应的样式；
3. 利用CSS Sprites技术实现纯图片圆角矩形；
4. 在实际运用中优化处理。

下面就具体的讲一下。

圆角矩形的原理

圆角矩形是指矩形的四个边角被设计成圆弧的一种界面效果。实现圆角矩形的方法非常多，但实现纯图片的圆角矩形技术是一种比较传统的方法，下面我们就来学习一下基于这种技术的实现方法。

实现纯图片圆角矩形

实现纯图片圆角矩形技术需要用到CSS Sprites技术，通过将所有需要使用的背景图片都打成一个图片并使用CSS background-image、background-position、background-repeat等属性将需要的图片通过坐标展示出来。

以下是一个非常简单的圆角矩形CSS代码：

.box {
  width: 200px;
  height: 100px;
  background-image: url('sprites.png');
  background-position: -100px -100px;
  background-repeat: no-repeat;
}

上述代码中，.box表示展示圆角矩形以及定义的其宽度和高度，background-image表示引入的图片，background-position表示图片在背景中的位置，background-repeat表示图片是否重复。

假如我们的图片是用来引入圆角矩形的图片，那么就需要确定好打包背景图片的大小并在less/sass/stylus文件中定义：

//less文件中的定义代码
.sprite-btn{
  .icon{
    background-image:url(/image/sprites.png);
    background-repeat: no-repeat;
    display: inline-block;
  }
}

然后，我们在需要展示圆角矩形的位置加入相应的代码即可：

<div class="box sprite-btn icon"></div>

通过上述代码，我们就可以在网页中展示出一个纯图片的圆角矩形了。

示例说明

例子一

我们现在需要展示一组红色尺寸为100x50的矩形，将其作为背景图片进行设置。

首先，确定好需要设置的样式及图片的大小：

.sprite-red-rect{
  .icon{
    width: 100px;
    height: 50px;
    background-image:url(/image/sprites.png);
    background-repeat: no-repeat;
    display: inline-block;
  }
}

然后，我们在HTML代码中添加相应的代码即可：

<div class="sprite-red-rect icon"></div>

例子二

我们现在需要展示一组矩形列表，其中矩形触发hover效果时颜色有变化，需要怎么设置。同样的，首先我们要确定好需要设置的样式及图片的大小：

.sprite-rect-item{
  .item{
    width: 100px;
    height: 50px;
    background-image:url(/image/sprites.png);
    background-repeat: no-repeat;
    display: inline-block;
  }
  .item:hover{
    background-position: -100px 0;
  }
}

代码中，我们在.item:hover伪类添加一个CSS样式，同时使用 background-position实现hover效果。

然后，我们在HTML代码中添加相应的代码即可：

<div class="sprite-rect-item">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如此设置，当鼠标触碰到每个矩形的时候，其背景颜色就会变成sprites.png中对应位置的图片。

总结

通过上述的讲解，我们大致了解到了基于Div+CSS实现纯图片圆角矩形的方法，同时也了解到了通过CSS Sprites技术实现纯图片圆角矩形的重要性，让我们在实际开发中能够更好地使用这一技术，优化我们的网页制作过程。