css能不能只显示指定长度的边框

html-css016

css能不能只显示指定长度的边框,第1张

本身是无法实现这样的要求的,但可以利用before或after伪类来“伪造”一个,当然这需要浏览器支持css3:

<style>

div {position:relative width:300px height:50px background-color:#bbb padding:4px}

div:before {content:"" position:absolute left:0 top:-2px width:50% height:2px background-color:red}

</style>

<div>请看这个div的“上边框”是只有一半的</div>

修改 width:50% 可以改变边框的长度,修改 height:2px 可以改变边框的宽度

标签或者div是一个矩形而且只能是矩形,所以一共有4条边,而设置单独一条边框是必须与这个边长度或者宽度相等的,最多只能控制边框的粗细或者样式(虚线、实线)而已;你要是想一边长一边短,那就只能用图片来模拟代替了

用border-right应该做不到,但可以用其他办法。

你看这是不是你要的效果:

css:

<style>

    .main {width:400pxheight:300pxmargin: 0 autoborder:1px solid #ccc}

    .border {width:10pxheight: 50%background: redfloat: rightposition: relativetop:25%border-radius: 5px}

</style>

html:

<body>

    <div class="main">

     <div class="border"></div>

    </div>

</body>