zoukankan      html  css  js  c++  java
  • 兼容性较好的圆角

    最近在写一个网站遇到了很多问题,下面写出来跟大家一起分享和讨论

    1.圆角的产生

    在最新的css3中有专门的圆角属性border-radius,代码如下:

    <div style=" 100px;height: 30px;border-radius: 10px;border:1px solid seagreen">aaaa</div>

    火狐下是-moz-border-radius ,Safari 和 Chrome 是 -webkit-border-radius 。W3C规定的是border-radius

    但是这么简单的属性ie低级版本(ie9以下)是不支持的。

    还有一种像素边缘化(不知道别人是不是这么叫)代码如下:

    /*css代码*/

    .sharp{224px;margin-bottom: 12px;}

    /*上圆角框通用设置样式,如果要运用多个不同颜色,以下6句不用重新变化--------------------------------*/
    .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
    .b1,.b8{margin:0 5px;}
    .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
    .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
    .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

    .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#BC7DA5;}
    .color1 .b1,.color1 .b8{background:#BC7DA5;}
    /*背景色*/
    .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#ffffff;}

    /*html代码*/

     <div class="sharp color1">
                <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
                <div class="head-left">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li><a href="#">免费注册</a></li>
                        <li><a href="#">我的购物车</a></li>
                        <li><a href="#">我的收藏夹</a></li>
                    </ul>
                    <span class="parities">
                        <img class="img1" src="images/index_21.jpg"><img class="img2" src="images/index_23.jpg">
                        <span class="huilv">6.1283</span>
                    </span>
                <div style="padding-bottom: 2px;"></div>
                </div>
                <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
            </div>

    这个方法有点冗杂,但是好处就是兼容性比较好

    还有就是用图片来做。原理很简单,首先将圆角的4个角截取下来。贴到对应的位置,但是不会写了,找了很久也没找到,下次找到了在贴上来

    这个方法有一个问题,如果使用margin属性,在ie各个版本又要调很久。

    在自己做的时候也参考了很多,发现一个写的比较全面的,但是个人感觉是土方法,但是很实用链接:http://www.cnblogs.com/mslove/archive/2009/03/24/1420703.html

  • 相关阅读:
    解决THINKCMF后台文章的相册图集只能上传一个图片的问题
    WordPress 在function.php 文件中方法中the_XXX方法失效
    Windows 增强版任务管理器-Process Explorer
    从Linux服务器下载网站文件
    SQLSERVER 免费对比数据库结构和数据的工具支持:SQL Server 2012, SQL Server 2008 and SQL Server 2005
    [UE4]蓝图继承方法:重写父类方法时,增加父类方法调用
    [UE4]蓝图使用GameMode重构
    [UE4]控制台命令,生成机器人
    [UE4]区分敌我
    [UE4]AnimOffset偏移动画
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3631768.html
Copyright © 2011-2022 走看看