zoukankan      html  css  js  c++  java
  • 转 网页圆角代码(纯CSS)

    从网站统计里看到很多朋友是为了寻找圆角代码而到这里的,为了不让大家失望所以重写了两篇圆角教程,这一篇是纯CSS制作圆角的方法,另一篇是利用图片制作圆角的方法。

    相信不久的将来再需要做圆角效果,就不会再用这么复杂而且不符合语义的方法了,因为CSS3里已经自带圆角效果,而现在很多浏览器也已经支持CSS3,除了垃圾的MS IE。

    圆角弧度1:

    弧度1的圆角

    我们先来说说最简单的弧度为1的圆角。上图为圆角div放大20倍的效果,图中的圆角框共有4条线,可以从上到下看作是由3个div构成。

    3个div我分别用红和黄的框画出来了,这样一个圆角块就是由这3个div做出来的。

    第一个和第三个(红框)的div高度为1px,左右边距为1px,线条用背景色(background)来呈现,CSS如下:

    .flt1-a { height: 1px; margin: 0 1px; background: #333; }

    第二个(黄框)div高度自动延伸,线条用左右边线(border)来显示:

    .flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

    需要提醒各位,在IE6下,把div高度的值设为很小时,IE6浏览器并不能作出正确的诠释呈现,总是会长出来一截,所以我们需要为IE6再写一段CSS,用于隐藏设定高度的超出部分:

    .flt1-a { overflow: hidden; }

    然后在HTML的某个div容器里写上他的结构:

    <div class="fillet-box">
    	<div class="flt1-a"></div>
    	<div class="flt-m">
    		弧度为1的圆角演示
    	</div>
    	<div class="flt1-a"></div>
    </div>

    最终效果:

     
    弧度为1的圆角演示
     

    圆角弧度2:

    弧度2的圆角

    上图是弧度为2的圆角,可以把它看为5个div,第一个和最后一个div(红框)样式是一样的:高度1px,左右边距2px,线条用背景色(background)呈现,CSS如下:

    .flt2-a { height: 1px; margin: 0 2px; background: #333; }

    第二个和第四个(黄框)div的高度为1px,左右边距1px,线条用边线(border)来呈现,CSS如下:

    .flt2-b { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

    第三个(蓝框)div高度自动延伸,线条用左右边线(border)来显示:

    .flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

    为IE6:

    .flt2-a,
    .flt2-b { overflow: hidden; }

    然后我们在HTML的某个div里写上他的结构:

    <div class="fillet-box">
    	<div class="flt2-a"></div>
    	<div class="flt2-b"></div>
    	<div class="flt-m">
    		弧度为2的圆角演示
    	</div>
    	<div class="flt2-b"></div>
    	<div class="flt2-a"></div>
    </div>

    最终效果:

     
     
    弧度为2的圆角演示
     
     

    圆角弧度3:

    第一个和最后一个div(红框)CSS:

    .flt3-a { height: 1px; margin: 0 3px; background: #333; }

    第二个和第六个div(黄框)CSS:

    .flt3-b { height: 1px; margin: 0 1px; border-left: 2px solid #333; border-right: 2px solid #333; }

    第三个和第五个div(蓝框)CSS:

    .flt3-c { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }

    第四个(绿框)CSS:

    .flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }

    为IE6:

    .flt3-a,
    .flt3-b,
    .flt3-c { overflow: hidden; }

    然后我们在HTML的某个div里写上他的结构:

    <div class="fillet-box">
    	<div class="flt3-a"></div>
    	<div class="flt3-b"></div>
    	<div class="flt3-c"></div>
    	<div class="flt-m">
    		弧度为3的圆角演示
    	</div>
    	<div class="flt3-c"></div>
    	<div class="flt3-b"></div>
    	<div class="flt3-a"></div>
    </div>

    最终效果:

     
     
     
    弧度为3的圆角演示
     
     
     

    圆角弧度4:

    从这个起我不再解释,我只放上CSS和HTML。

    CSS:

    .flt4-a { height: 1px; margin: 0 4px; background: #333; }
    .flt4-b { height: 1px; margin: 0 2px; border-left: 2px solid #333; border-right: 2px solid #333; }
    .flt4-c { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
    /* for ie6 */
    .flt4-a,
    .flt4-b,
    .flt4-c { overflow: hidden; }

    HTML:

    <div class="fillet-box">
    	<div class="flt4-a"></div>
    	<div class="flt4-b"></div>
    	<div class="flt4-c"></div>
    	<div class="flt-m">
    		弧度为4的圆角演示
    	</div>
    	<div class="flt4-c"></div>
    	<div class="flt4-b"></div>
    	<div class="flt4-a"></div>
    </div>

    最终效果:

     
     
     
    弧度为4的圆角演示
     
     
     

    圆角弧度5:

    CSS:

    .flt5-a { height: 1px; margin: 0 5px; background: #333; }
    .flt5-b { height: 1px; margin: 0 3px; border-left: 2px solid #333; border-right: 2px solid #333; }
    .flt5-c { height: 1px; margin: 0 2px; border-left: 1px solid #333; border-right: 1px solid #333; }
    .flt5-d { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
    /* for ie6 */
    .flt5-a,
    .flt5-b,
    .flt5-c,
    .flt5-d { overflow: hidden; }

    HTML:

    <div class="fillet-box">
    	<div class="flt5-a"></div>
    	<div class="flt5-b"></div>
    	<div class="flt5-c"></div>
    	<div class="flt5-d"></div>
    	<div class="flt-m">
    		弧度为5的圆角演示
    	</div>
    	<div class="flt5-d"></div>
    	<div class="flt5-c"></div>
    	<div class="flt5-b"></div>
    	<div class="flt5-a"></div>
    </div>

    最终效果:

     
     
     
     
    弧度为5的圆角演示
     
     
     
     

    你理解了吗?如果理解了请尝试自己动手做出以下效果:
    1. 做一个带有背景色的圆角效果。
    2. 做一个圆角弧度为8的圆角效果。
    3. 做一个边框线条为2px的圆角效果。

    提示:其实圆角的HTML标签,不一定要用div,为了让代码简练,我们可以用<b>、<i>等短元素也可以,只要在CSS里用display:block;把它们申明成块级元素就行了。
    但是有些元素已经或即将被XHTML抛弃,所以会无法通过XHTML的验证,请你自行斟酌选择理想的标签。

    纯CSS圆角优点:
    1. 无图片,加载速度快,不会出现圆角加载延迟等情况。
    2. 不受图片局限,可随意改变边框颜色和背景。

    纯CSS圆角缺点:
    1. 锯齿感强烈。
    2. 代码繁杂不易阅读,结构不语义化,偏离XHTML的精神。
    3. 不易改变背景色,弧度越大要改变背景色就越难。
    4. 做大弧度圆角时不易理解构成圆角的线条,需有一定的绘画能力。

  • 相关阅读:
    TOMCAT添加管理用户认证
    NGINX配置详解及应用
    Zabbix部署
    NGINX+TOMCAT实现反向代理
    数据库-高级部分
    数据库-用户管理与pymysql
    数据库-表操作(CRUD)
    数据库-表关系练习
    数据库-表关系
    数据库-基础概念
  • 原文地址:https://www.cnblogs.com/leejersey/p/2251614.html
Copyright © 2011-2022 走看看