zoukankan      html  css  js  c++  java
  • CSS3圆角属性总结

    CSS3圆角属性在Firefox,Chrome,Safari的实现

    目前我们已经可以在Firefox,Chrome,Safari实现这个功能了,但他们也还是使用私有属性来实现,用法上略有区别。

    先说一下Firefox的圆角属性:
    -moz-border-radius: {1,4} | inherit
    如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;
    也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。
    也可以用合并起来一起设置,如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

    对chrome、Safari这两个webkit内核的浏览器来说,是用-webkit-border-radius来实现的。
    -webkit-border-radius:{1,2} | inherit;
    如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-moz-border-radius:3px;
    如果是单独设置四个角的话,需要采取这种方式

    -webkit-border-top-left-radius:5px 10px;
    -webkit-border-top-right-radius:5px 10px;
    -webkit-border-bottom-right-radius:5px 10px;
    -webkit-border-bottom-left-radius:5px 10px;

    如果是要合并的话,只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

    总结圆角属性不同浏览器下的运用

    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    更多详细的请大家自己查看以下链接:
    mozilla 和webkit的 CSS圆角

  • 相关阅读:
    JDBC_增删改
    JSP内置对象作用域
    497. Random Point in Non-overlapping Rectangles
    921. Minimum Add to Make Parentheses Valid
    946. Validate Stack Sequences
    824. Goat Latin
    Acwing 165 小猫爬山 (dfs)
    Codeforces #656 Problem D
    Codeforces #656 Problem C
    对象属性拷贝工具类大全
  • 原文地址:https://www.cnblogs.com/wuyali/p/2194651.html
Copyright © 2011-2022 走看看