您的位置:首页 - 教程 - CSS - 正文
CSS画边框和背景

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

1.直接设置border-top: 

border-top: 1px solid #eee;

 

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

 background-image: url('demo.gif');
 background-repeat: no-repeat;
 background-attachment:fixed;
 background-position: 0% 0%; 
 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;
}

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

 

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


评论: