调整段落 underline 的垂直距离
发布在Allenice's blog2014年11月26日view:3543
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

调整段落 underline 的垂直距离

最近做了一个项目,里面有篇文章,文字底部需要像信纸那样的线条,而且不同的来源有不同的颜色。一般做到这样的效果是使用背景图片,但是这种方式需要不同颜色的背景图片,而且如果要调整段落的行距,又要重新做图片。另一种方式是使用 “text-decoration: underline;”, 但是下划线是紧紧贴住文字底部,呵呵。我的解决方案是使用 css3 的背景渐变。

信纸

原理很简单,比如段落的行距是 x,背景颜色是 f,线条颜色是 b,那么渐变从 0 到 (x - 1) px的渐变颜色是 f,然后 (x - 1) 到 x 的颜色是 b, 这样就形成了 1px 的底部线条。 最后设置 background-repeat: repeat-y;

html:

  <article>
    <img src="http://static.allenice233.com/image/blog/2014-05-23_204314.png"/>
    <p>又一个“未来备 。。。</p>
    <p>这场段。。。</p>
    <p>与此前传闻不 为 326,iPhone。。。</p>
  </article>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 360px;
  margin: 0 auto;
  padding: 10px;
}

img {
  width: 50%;
  float: left;
  padding-right: 10px;
  background-color: #fff;
}

article {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px auto;
  padding: 10px;
  font-size: 12px;
  overflow: hidden;
}

p {
  line-height: 25px;
  background-image: -moz-linear-gradient(top , #fff 24px, #ccc 24px, #ccc 25px);
  background-image: -webkit-linear-gradient(#fff 24px, #ccc 24px, #ccc 25px);
  background-image: linear-gradient(to bottom, #fff 24px, #ccc 24px, rgba(0,0,0,0.5) 25px);
  background-repeat: repeat-y;
  background-size: 100% 25px;
}
评论
发表评论
暂无评论
WRITTEN BY
Allenice
我只是一个单纯的萝莉控,H什么的才没有想过!
TA的新浪微博
PUBLISHED IN
Allenice's blog

我的前端技术博客内容

我的收藏