css实现圆角边框
这是网络上流传的一个法子,但其实也不是那么完美,因为毕竟要在div层里加东西,还要单独针对所加的设置颜色,而不是单纯的用个CSS就可以解决;有时候算起来并没有比图片方便。
由于本人懒且网络上例子多,这里就不可视化的例子了。只是列出代码,方便自己用。
CSS:
#外层 id{BACKGROUND: #9bd1fa;}
B.rtop {DISPLAY: block; BACKGROUND: #fff}
B.rbottom {DISPLAY: block; BACKGROUND: #fff}
B.rtop B {DISPLAY: block; BACKGROUND: #9bd1fa; OVERFLOW: hidden; HEIGHT: 1px}
B.rbottom B {DISPLAY: block; BACKGROUND: #9bd1fa; OVERFLOW: hidden; HEIGHT: 1px}
B.r1 {MARGIN: 0px 5px}
B.r2 {MARGIN: 0px 3px}
B.r3 {MARGIN: 0px 2px}
B.rtop B.r4 {MARGIN: 0px 1px; HEIGHT: 2px}
B.rbottom B.r4 {MARGIN: 0px 1px; HEIGHT: 2px}
DIV:
<DIV id=nifty>
<!-- 上方圆角的层相关 -->
<B class=rtop><B class=r1></B><B class=r2></B><B class=r3></B><B class=r4></B></B>
<!-- 中间文字 -->
<P>css for 圆角 ------ 摇曳铃丹 YYLD.net</P>
<!-- 下方圆角的层相关 -->
<B class=rbottom><B class=r4></B><B class=r3></B><B class=r2></B><B class=r1></B></B>
</DIV>