CSS画边框

实际开发中经常会出现给某个容器画一个边框，比如给div画一个上边框这样.这里就以给div画上边框为例。要给div画上边框有几种实现方式。

1.直接设置border-top: 

border-top: 1px solid #eee;

 

2.背景图片的方式的方式

1 background-image: url('demo.gif');
2 background-repeat: no-repeat;
3 background-attachment:fixed;
4 background-position: 0% 0%; 
5 background-size:100% 1px;

上面的css表示，给div设置一个背景图片，只显示长度100%，但是高度1px。这个也可以显示出来一条线。

 

3.给div里面再放一个元素，hr，div, span都行，给这个元素设置样式

#target hr{
    width: 100%;
    height: 1px;
    border: 0;
    background-color: #222;
}


<div id="target">
    <hr />
</div>

 

4.使用伪类元素实现

#target:before{
    content: " ";
    background-color: #222;
    width: 100%;
    height: 3px;
    display: block;
}

这种方式会占用元素的内部空间。不过只是实现一条细线效果还是很好用的。

 

如果你无意看到，还有其他的方式可以留言告诉我。

 

posted @ 2016-06-14 16:30  Dn9x  阅读(683)  评论(0)  编辑  收藏  举报