define border width(not thickness)
can I define border width. like
.box{
w开发者_开发技巧idth:200px;
height:100px;
border-bottom:1px solid #000;
}
box width is 200px but i want border width in bottom only 100px.
No. You'll have to put another element within the .box, which is 100px wide, and apply the border to that.
It sounds like you want half a border. Strange, but doable, I think. This is working in Firefox, Chrome, and Safari. MSIE I don't have on hand at the moment, and may cause problems.
The way this works is to have an enclosing box with a background-color that's half as wide, and 1 pixel taller than div.box. I put a background of gray on the body so you can see it working.
<html>
<style type="text/css">
body {
background-color: #ccc;
color: #000;
}
.box-border {
width: 100px; /* half as wide as .box! */
height: 101px; /* just slightly taller than .box! */
background-color: #000;
overflow: visible; /* .box, inside this, can go outside it */
}
.box{
width: 200px;
height: 100px;
background-color: #fff;
}
</style>
<body>
<div class="box-border">
<div class="box">
The quick brown fox jumped over the lazy dog.
</div>
</div>
</body>
</html>
or you define a background image like that: .box { background:url(border.gif) no-repeat 0 bottom;}
and the image is 100px wide and for example 2px heigh.
加载中,请稍侯......
精彩评论