《css圆角设计》由会员分享，可在线阅读，更多相关《css圆角设计（59页珍藏版）》请在金锄头文库上搜索。
1、Css 圆角边框设计#xsnazzy h1, #xsnazzy h2, #xsnazzy p margin:0 10px; letter-spacing:1px; #xsnazzy h1 font-size:2.5em; color:#fff; #xsnazzy h2 font-size:2em;color:#06a; border:0; #xsnazzy p padding-bottom:0.5em; #xsnazzy h2 padding-top:0.5em; #xsnazzy background: transparent; margin:1em;.xtop, .xbottom disp
2、lay:block; background:transparent; font-size:1px; .xb1, .xb2, .xb3, .xb4 display:block; overflow:hidden; .xb1, .xb2, .xb3 height:1px; .xb2, .xb3, .xb4 background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c; .xb1 margin:0 5px; background:#08c; .xb2 margin:0 3px; border-width:0 2px;
3、.xb3 margin:0 2px; .xb4 height:2px; margin:0 1px;.xboxcontent display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;Snazzy Borders Based on Nifty Corners By Alessandro Fulcinitihttp:/pro.html.it/esempio/nifty/Rounded borders without images Lorem ipsum dolor sit amet, consectetuer a
4、dipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendreritin vulputate velit esse mole
5、stie consequat, vel illum dolore eu feugiat nullafacilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesentluptatum zzril delenit augue duis dolore te feugait nulla facilisi.兼容各个浏览器的纯兼容各个浏览器的纯 CSS 圆角代码圆角代码无标题文档.spiffy display:block; .spiffy * display:block; height:1px; overflow:
6、hidden; background:#0a67e6; .spiffy1 border-right:1px solid #95bdf4; padding-right:1px; margin-right:3px; border-left:1px solid #95bdf4; padding-left:1px; margin-left:3px; background:#478dec; .spiffy2 border-right:1px solid #e6effc; border-left:1px solid #e6effc; padding:0px 1px; background:#3883ea;
7、 margin:0px 1px; .spiffy3 border-right:1px solid #3883ea; border-left:1px solid #3883ea; margin:0px 1px; .spiffy4 border-right:1px solid #95bdf4; border-left:1px solid #95bdf4; .spiffy5 border-right:1px solid #478dec; border-left:1px solid #478dec; .spiffy_content padding:0px 5px; background:#0a67e6
8、; color:#fff; 简洁设计网是个好 网站简洁设计网是个好网 站简洁设计 网是个好网站简洁设计网是个 好网站简洁设计网无图片圆角效果无图片圆角效果 css 圆角效果，IE6, firefox 均显示正常htmlheadtitlecss 圆角效果-七度空间网页教学网/titlemeta http-equiv=“content-type“ content=“text/html; charset=gb2312“style type=“text/css“div.RoundedCornerbackground: #9BD1FAb.rtop, b.rbottomdisplay:block;back
9、ground: #FFFb.rtop b, b.rbottom bdisplay:block;height: 1px;overflow: hidden; background: #9BD1FAb.r1margin: 0 5pxb.r2margin: 0 3pxb.r3margin: 0 2pxb.rtop b.r4, b.rbottom b.r4margin: 0 1px;height: 2px/style/headbodydiv class=“RoundedCorner“b class=“rtop“b class=“r1“/bb class=“r2“/bb class=“r3“/bb cla
10、ss=“r4“/b/bbr无图片实现圆角框brbrb class=“rbottom“b class=“r4“/bb class=“r3“/bb class=“r2“/bb class=“r1“/b/b/div/body/htmlCSS 圆角（代码比较精练）圆角（代码比较精练）2007-05-28 21:16简写 CSS 圆角.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.bdisplay:block;overflow:hidden; .b1,.b2,.b3,.b1b,.b2b,.b3bheight:1px; .b2,.b3,.b4,.b2b,.b3b,.b4b,.bb
11、order-left:1px solid #007FBA;border-right:1px solid #007FBA; .b1,.b1bmargin:0 5px;background:#007FBA; .b2,.b2bmargin:0 3px;border-width:2px; .b3,.b3bmargin:0 2px; .b4,.b4bheight:2px;margin:0 1px; .d1background:#041D30;简写 CSS 圆角2 种种 css 圆角代码圆角代码html xmlns:v v:* behavior: url(#default#VML); css 实现真正的圆
12、角表格 css 圆角效果 div.RoundedCornerbackground: #9BD1FA b.rtop, b.rbottomdisplay:block;background: #FFF b.rtop b, b.rbottom bdisplay:block;height: 1px;overflow: hidden; background: #9BD1FA b.r1margin: 0 5px b.r2margin: 0 3px b.r3margin: 0 2px b.rtop b.r4, b.rbottom b.r4margin: 0 1px;height: 2px 无图片实现圆角框 本
13、文探讨的是前端设计种最常用的页面圆角框效果的种不同方法实现解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义” ，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的 web 标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。然而，就是这个圆角，却成为了网页前端人员心中永远抹之不去的阴影，对它，可以说是又痛又爱。爱的是它的漂亮，痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。让我们来回顾一下目前网络流行的都有哪些解决方案。，无图片纯，无图片纯 csscs
14、s 圆角框圆角框收录理由：兼容性强，不用图形图一特点：1.不用任何图形，使用很多个 div 容器模拟出圆角效果。2.兼容性：通杀所有浏览器缺点：1.构造这个圆角需要加入太多的无语义的标签，结构比较冗余。2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。3.边框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一并且一个页面中圆角应用不多的页面。4.不容易实现圆弧内有渐变色的图形背景。5.圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧较小的网页。实现原理：用很多1像素高的 div 容器，利用背景色和边框色来模拟出圆角框的轮廓线。实例
15、演示： http:/www.cssplay.co.uk/boxes/snazzy.html，无图片纯，无图片纯 csscss 圆角框，用特殊字符（圆角框，用特殊字符（圆点）模拟出圆角。2.兼容性：通杀所有浏览器3.圆角平滑缺点：1.构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四个角图片的定位，并且字符大小对其有影响，灵活性不够。3.颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。4.一样不容易实现圆弧内有渐变色的图形背景。实现原理：用特
16、殊字符（display:inline-block;Arcsize 为半径Strokeweight 为边框线宽度Strokecolor 为边框线的颜色实例演示：（请在 IE 系列浏览器下查看本实例）VMLVML 画平滑圆角画平滑圆角使用 IE 专用的 VML 来画平滑圆角框，还可以画出阴影效果。就其图形表现来说，是非常完美的。，利用私有属性绘制圆角（，利用私有属性绘制圆角（FF3FF3 onlyonly）收录理由：平滑无锯齿图五特点：1.不用任何图形。2.兼容性：只能在 FF3中使用，其它浏览器不受支持。3.圆角半径随意调整4.重用性强：多个圆角任意调用，只需要样式表设置就可以。5.圆角颜色随意设置。6.
