zoukankan      html  css  js  c++  java
  • bootstrap 3.0 LESS源代码浅析(二)

    border-radius是最常见的CSS3属性,但你知道他多少东西呢?

    比如:

    border-radius:2em;

    相当于什么?

    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

    实际上,其首先都是水平方向(top or bottom)的弧度,然后才是垂直方向的弧度(left or right)。

    忘记在哪里的一道题目 

    请用CSS实现如上图一样的椭圆,有兴趣的同学可以思考一下。 

    回到Bootstrap 3.0

    OK,我们回到Bootstrap,mixins.less中关于border radius的函数只有下面四个:

    // Single side border-radius
    .border-top-radius(@radius) {
      border-top-right-radius: @radius;
       border-top-left-radius: @radius;
    }
    .border-right-radius(@radius) {
      border-bottom-right-radius: @radius;
         border-top-right-radius: @radius;
    }
    .border-bottom-radius(@radius) {
      border-bottom-right-radius: @radius;
       border-bottom-left-radius: @radius;
    }
    .border-left-radius(@radius) {
      border-bottom-left-radius: @radius;
         border-top-left-radius: @radius;
    }

    可见Bootstrap提供了单边的圆角的快捷方法。我们发现Bootstrap 3.0中border-radius相关属性并没有使用任何prefix。

    实际上目前,现代浏览器上已经完全支持该属性,具体支持程度看见:

    http://caniuse.com/border-radius

    最昂贵的CSS属性

    根据kangax的文章,对于border-radius,当页面滚动或者重绘时,其计算成本最高的CSS属性,比其他属性产生更多的计算时间。

     

    所以注意减少单页面过多使用该属性的元素,避免页面产生顿卡现象。

  • 相关阅读:
    http状态大全
    goaccess 分析日志
    laravel 初识
    mac 安装wget
    python 16进制转成中文
    zeromq安装---php-zmq
    Mac Yosemite 10.10 编辑mac的配置
    Mac Yosemite 10.10 下利用 Launchctl 自启动 mysql
    MacBook设置终端命令行的颜色高亮显示
    XPath 常用语法札记
  • 原文地址:https://www.cnblogs.com/justany/p/3434744.html
Copyright © 2011-2022 走看看