5 个简朴但很是适用的 CSS 属性

这篇文章先容了 5 个适用的 CSS 属性。你应该很认识，但很也许很少会行使到。我并不是在评论瞻望全新的 CSS3 属性，我指的是旧的 CSS2 中的属性，如：clip，min-height，white-space，curosr 和 display 等一些被全部赏识器普及支持的属性。因此，万万不要错过这篇文章，由于你也许发明它们竟有云云之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它应承你行使矩形袒护页面元素的内容。要剪辑一个元素：你必需指定其 position 属性为 absolute，然后指定相对付元素的 top，right，bottom，left 值。

图片剪辑实例（演示）

以下示例演示了怎样行使 clip 属性袒护一张图片。起首，指定 <div> 元素为 position:relative，然后指定 <img> 元素为 position:absolute，而且按照现实必要设定 rect 值。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调解尺寸和剪辑（演示）

在这个示例中，我将展示怎样调解图像尺寸和剪辑图片。素材图片是矩形的，我想将其减少至 50％ 的尺寸，用来建设一个正方形名目标缩略图。因此，我用宽度和高度属性来调解图像，并行使 clip 剪辑属性予以袒护。然后用 left 属性将图片移开左侧 15px 的间隔。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!