>웹 프론트엔드 >HTML 튜토리얼 >[推荐]制作div+css圆角_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:30:331100검색


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

首先看样式表文件:
.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 阅读( ...) 评论( ...) 编辑 收藏

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.