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属性，比其他属性产生更多的计算时间。
立即学习“前端免费学习笔记（深入）”；
所以注意减少单页面过多使用该属性的元素，避免页面产生顿卡现象。
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
604
收藏
