在css代码中设置下边线为什么显示的是上边线

html-css09

在css代码中设置下边线为什么显示的是上边线,第1张

一般情况是没有设置DIV的高导致的。如果DIV里面的浮动元素的话要清除浮动。

div{height:300pxborder-bottom:solid 1px #333}

这样子就可以了。

给你个完整页面，你可以看下效果

------------------------------------------------

<html>

<head>

<title>

Rounded Box Demo

</title>

<style type="text/css">

body {

background-color: #FFF

margin: 0px

padding: 0px

font-size: 16px

font-family: Georgia

}

div.rounded-box {

position:relative

width: 9em

background-color: #C0C0C0

margin: 3px

}

/*********************

GLOBAL ATTRIBUTES

*********************/

div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner

{position:absolutewidth:20pxheight:20pxbackground-color:#FFFoverflow:hidden}

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relativefont-size:150pxfont-family:arialcolor:#C0C0C0line-height: 40px}

/*********************

SPECIFIC ATTRIBUTES

*********************/

div.top-left-corner { top:0pxleft:0px}

div.bottom-left-corner {bottom:0pxleft:0px}

div.top-right-corner {top:0pxright:0px}

div.bottom-right-corner {bottom: 0pxright:0px}

div.top-left-inside {left:-8px}

div.bottom-left-inside {left:-8pxtop:-17px}

div.top-right-inside {left:-25px}

div.bottom-right-inside {left:-25pxtop:-17px}

div.box-contents {

position: relativepadding: 8pxcolor:#000

}

</style>

</head>

<body>

<div class="rounded-box">

<div class="top-left-corner"><div class="top-left-inside">•</div></div>

<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>

<div class="top-right-corner"><div class="top-right-inside">•</div></div>

<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>

<div class="box-contents">

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

Text goes here<br>

</div><!-- end div.box-contents -->

</div><!-- end div.rounded-box -->

</body>

</html>