Heim >Web-Frontend >HTML-Tutorial >[推荐]制作div+css圆角_html/css_WEB-ITnose

[推荐]制作div+css圆角_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:30:331112Durchsuche


“尽量不要圆角,需要切图”“这样设计代码不好实现”云云,昨天在网上看到一个只用代码就可以设计出圆角的效果,~ 和大家一起分享~

首先看样式表文件:
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接着看页面代码:


当然你也可以用其他的标签

或者之类,应该也是可以的

在上面两句之间加上一个左右border的content
这就是效果了:

posted @ 2009-05-17 17:58 mokliu 阅读( ...) 评论( ...) 编辑 收藏

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn