CSS 有趣的边框

转载

mb5fd340813ba80 2016-03-16 08:15:00

今天看到一篇文章。是利用CSS边框来做折纸效果。感觉非常有意思。于是就对CSS的border研究了一下。发现还真有一些好玩的使用方法。

1.border折纸效果

首先是HTML代码，为了简单，就一个div:

<div class="note">
  折纸效果
</div>

然后我们为它加上边框效果：

.note{
  display:block; 
  margin:100px auto;
  width:100px;
  height:100px;
  background:#ff0;
  border:1px solid #000;
}

这是最简单最丑的边框效果了，看起来像这样：

CSS 有趣的边框_css

果然边框太细了看不到细节，我们把边框设粗一点，然后把每一个方向的边框颜色改一下：

.note{
  display:block; 
  margin:100px auto;
  width:100px;
  height:100px;
  background:#ff0;
  border-width:10px 10px 10px 10px;
  border-color:#aa0 #f0f #512 #a21;
  border-style:solid;
}

效果例如以下：

CSS 有趣的边框_css_02

瞬间产生3D效果了有木有！我们继续把边框设粗。然后把容器的height设为0：

.note{
  display:block; 
  margin:100px auto;
  width:100px;
  height:0px;
  background:#ff0;
  border-width:50px;
  border-color:#aa0 #a21 #740 #a21;
  border-style:solid;
}

CSS 有趣的边框_圆角_03

瞬间产生信封的效果了有木有！我们继续把width也设为0，效果像这样（代码就不贴了）：

CSS 有趣的边框_css3_04

是不是有一种金字塔的感觉呢！

好了，就玩到这里。之前说了做折纸效果，如今想想应该是SO EASY了，先看效果图：

CSS 有趣的边框_html_05

note还是原来的note，仅仅是给note加了一个before伪元素。设置伪元素宽度为0，内容为空。利用边框做出三角形效果，然后通过绝对定位到右上角，最后加上阴影效果就ok啦。

代码例如以下：

.note{
  display:block; 
  margin:100px auto;
  width:100px;
  height:100px;
  background:#ff0;
  padding:50px;
  position:relative;
}
.note:before{
  content:"";
  width:0;
  border-color:#fff #fff transparent transparent;
  border-style:solid;
  border-width:20px;
  position:absolute;
  top:0;
  right:0;

  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
        box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}