zoukankan      html  css  js  c++  java
  • CSS3 圆角(borderradius)

    值:半径的长度

    前缀

    • -moz(例如 -moz-border-radius)用于Firefox
    • -webkit(例如:-webkit-border-radius)用于Safari和Chrome。

    例1

    <div id="round"></div>
    #round {
        padding:10px; 300px; height:50px;
        border: 5px solid #dedede;
        -moz-border-radius: 15px;      /* Gecko browsers */
        -webkit-border-radius: 15px;   /* Webkit browsers */
        border-radius:15px;            /* W3C syntax */
    }

    效果:
    CSS圆角

    例2:无边框

    <div id="round"></div>  
    #round {
        padding:10px; 300px; height:50px;
        background:#FC9; 
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius:15px;
    }

    效果:
    CSS圆角

    书写顺序

    /* Gecko browsers */
    -moz-border-radius: 5px; 
    /* Webkit browsers */
    -webkit-border-radius: 5px; 
    /* W3C syntax - likely to be standard so use for future proofing */
    border-radius:10px;

    其它

    支持上、右、下、左

    border-radius:5px 15px 20px 25px;

    支持拆分书写

    /* Gecko browsers */
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 20px;
     
    /* Webkit browsers */
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 20px;
     
    /* W3C syntax */
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius:  20px;

    支持性

    浏览器支持性
    Firefox(2、3+)
    Google Chrome(1.0.154+…)
    Google Chrome(2.0.156+…)
    Safari(3.2.1+ windows)
    Internet Explorer(IE7, IE8) ×
    Opera 9.6 ×

    友情链接:北京航宇中瑞测控技术有限公司

  • 相关阅读:
    python3 TypeError: a bytes-like object is required, not 'str'
    Centos 安装Python Scrapy PhantomJS
    Linux alias
    Vim vimrc配置
    Windows下 Python Selenium PhantomJS 抓取网页并截图
    Linux sort
    Linux RSync 搭建
    SSH隧道 访问内网机
    笔记《鸟哥的Linux私房菜》7 Linux档案与目录管理
    Tornado 错误 "Global name 'memoryview' is not defined"
  • 原文地址:https://www.cnblogs.com/rainman/p/2085800.html
Copyright © 2011-2022 走看看