zoukankan      html  css  js  c++  java
  • border-radius

    1 border-radius 私有前缀

    浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius-moz-border-radius

    2 border-radius百分比值

    是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/outerHeight()方法代表尺寸),也就是包含边框,padding后的尺寸。而不是单纯地相对于width/height

    我们将border-radius: 300px还原成其整容前的模样,结果是:

    border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
    border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

    demo:设置的是200像素*300像素,border-radius:200px 0px 0xp 0px/300px  0 0 0;结果最后右上角显示的却是200像素*200像素半径下的圆弧效果,这显然不符合认知啊!!

    实际上是这样的,CSS3圆角除了大值特性,还有一个等比例特性,就是水平半径和垂直半径的比例是恒定不变的。

    回到上面例子,由于我们的元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px*300px1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素*200像素的圆弧。

    第三节末尾所提到的“反而因为值设大了”就是指的这个。

    可能有人会疑问,那该如何设置才能实现等同于border-radius:50%(显示椭圆)的效果呢。哈哈,如果你理解了上面的内容,其实就很简单了,最关键的一点就是比例关系。我们的元素占据的尺寸是200像素*300像素。所以,只要让水平半径和垂直半径保持2:3的比例就可以了,然后,可以利用“大值特性”设一个你认为安全的值就可以了。

    demo{

    200px;
    height:300px;
    background-color: red;
    -webkit-border-radius: 200px/300px ;
    -moz-border-radius: 200px/300px ;
    border-radius: 200px/300px;

    }

    <div class="demo"></div>

    来自:http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/

  • 相关阅读:
    HIVE高级(14):优化(14) Hive On Spark配置
    HIVE高级(13):优化(13) Hive Job 优化
    HIVE高级(12):优化(12) 数据倾斜
    HIVE高级(11):优化(11) HQL 语法优化(2) 多表优化
    HIVE高级(10):优化(10) HQL 语法优化(1) 单表优化
    HIVE高级(9):优化(9) Hive 建表优化(1) 分区表/分桶表/合适的文件格式/合适的压缩格式
    HIVE高级(8):优化(8) Explain 查看执行计划(二)
    Hive基础(19):Hive 函数(2) 自定义函数/自定义 UDF 函数/自定义 UDTF 函数
    Hive基础(18):Hive语法(5) DDL(2) 分区表和分桶表
    MATLAB RGB2HSV、HSV2RGB
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6269860.html
Copyright © 2011-2022 走看看