CSS伪元素before、after妙用：制作时尚焦点图相框

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

88091

发布于 25 条评论

在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？
:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。
我们用CSS手册可以查询到其基本的用法：

  • E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
  • E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
  • Ie6-7 不支持

既然说到了before、after，那么我们也要大概的了解下content，content用来和:after及:before伪元素一起使用，在对象前或后显示内容。基本的用法如下：

div:after{content:'任意字符串';}

现在我们大概知道before和after的大概用法了，那么我们就可以在元素的内容之前或者之后插入新内容。而插入的内容我们也可以用css样式来加以控制和美化。也许在平常中这样子的标签用处不大，但是存在即是真理，哈哈，肯定有他的妙用之处，今天就来看看利用before和after制作的一个创意的时尚焦点图相框，以后制作这种边框线的时候我们可以完全抛弃图片的做法，而且做出来的非常的精美。不信，就请先看看效果demo吧：

查看预览下载附件

制作思路以及方法：

1、 在图片层加多一层div，设置1像素的边框线，边框线有上下左右四条边框，而我们想要的只是每两条边框线组成的类似小三角形的形状，那么我们只要把四条边框线的中间部分去掉，那不就实现了我们的效果。那我们应该怎么把四条边框线中间部分去掉？或者用什么东西把他盖住，不让他显示出来？解决办法就是，我们知道before和after伪元素可以在元素之前或者之后添加新的内容，那我们就利用这两个伪元素来盖住四条边框线的中间部分。
2、 我们先去掉左右两边的边框线，在边框层，利用before伪元素，使用css样式的定位，设置白色边框，为什么要白色的边框呢？因为要把之前的左右边框中间部分遮掉，颜色设置成和背景色（本例的背景为白色背景）一致，这样子看起来就相当于中间部分被裁剪掉了。
3、我们继续去掉上下两条边框线，方法同上，利用after伪元素，使用css样式的定位，设置为白色边框，遮掉上下边框线的中间部分。这样子一来，基本的形状就出现了
4、美化步骤，调整我们的细节，边框线调整为虚线。

css-before-after

了解了基本的思路和方法，是不是很简单呢？那我们就开始动手写代码吧。

HTML代码：

<div class="content">
<ul>
  <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"><img src="jiawin_1.jpg" />
  <p class="focus"></p></a></li>
  <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"><img src="jiawin_2.jpg" />
  <p class="focus"></p></a></li>
  <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"><img src="jiawin_3.jpg" />
  <p class="focus"></p></a></li>
  <li id="noborder"><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"><img src="jiawin_4.jpg" />
  <p class="focus"></p></a></li>
</ul>
</div>

CSS样式代码

.content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; }
.content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;}
.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;}
.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;}
.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;}
.content ul li:hover .focus {display:block;}
#noborder {border-right:0 none;}

通过这个例子是不是很方便的把这个效果做出来了呢？而且看看我们的代码，是不是很简洁呢！哈哈……或许还有更好的方法来实现，我们可以一起探讨。我个人感觉其实div+css是很好的一门很容易手上但是功能性很强的技术，而且他很好玩很有趣。利用你的奇思妙想， 你可以做出各种意想不到的效果。期待你的作品哦。

查看预览下载附件

相关推荐

全部评论 / 25

  1. 这个很漂亮哦

    wang 2012-10-07
    20

  2. 小新手发问 focus:before 里
    width + border-right + border-left = 176px
    跟 focus 大小相同了
    可是加上 left:-1px 不是右边边线会沒遮到吗？
    css还理解不熟 请指点

    陳思模 2012-10-07
    19

  3. 请教一个小问题 – 上面样式中 focus:before 、focus:after 为啥有个 left:-1px; 这里的 width 不是跟 focus 相同了么？求解释 :oops:

    Webuffer 2012-10-07
    18
    1. Javin

      因为父级有border属性，需要将其盖住，所以得移动负一个像素。

      1号 Javin 2012-10-07

  4. 超级唯美的站点 :roll: 以后得常来逛逛 :twisted:

    Webuffer 2012-10-07
    17

  5. 到处都有贵站的链接呢!

    kaibb 2012-10-07
    16

  6. 诶嘿！之前没去太注意，现在发现还是满有个性的嘛这2个伪类。可惜就是iE67不支持，对于一些比较坑爹的老板，还是无法发挥他的作用啊

    Robin 2012-10-07
    15

  7. 学习了！、

    Linsky 2012-10-07
    14
  8. Javin

    如果图片背景不是纯色的怎么处理呢？

    可以分别利用li和a的:befor、:after各制作一个小正方形框架,然后再依次隐藏两条相对应的边框,最终成为一个三角形。
    demo:http://dabblet.com/gist/3929724

    1号 Javin 2012-10-07
    13

  9. 横向滚动的话，右侧有个小BUG，亲

    。。。 2012-10-07
    12
    1. Javin

      可以说清楚点吗？你是用什么浏览器？

      1号 Javin 2012-10-07
  10. Javin

    有细心的网友提出，四个角的好做，如果是两个对角怎么处理呢？
    其实依然可以用before、after来解决，思路是一样的，只是用before、after层遮住的地方不同而已，四个角的是遮住边框线的中间部分，对角的话遮住相邻边框线组成的直角就行，然后再利用position来调整位置，下面是我在本例的基础上修改的参考样式：
    .focus:before {width:154px; height:154px; border-top:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; right:-1px; top:-1px;}
    .focus:after {width:154px; height:154px; border-left:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; bottom:-1px; left:-1px;}

    1号 Javin 2012-10-07
    11

  11. 确实很有想法，赞

    impony 2012-10-07
    10

  12. 没找着留言板呢，不过博主的主题确实挺好看。

    刘珍益博客 2012-10-07
    9
    1. Javin

      可以前往留言联系留言，感谢你的反馈 :smile:

      1号 Javin 2012-10-07

    2. 这个站做的不错

      zoowar 2012-10-07

  13. 有学习价值！ :oops:

    Jayuh 2012-10-07
    8