Maison > interface Web > tutoriel HTML > bootstrap 3.0 LESS源代码浅析(二)_html/css_WEB-ITnose

bootstrap 3.0 LESS源代码浅析(二)_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:34:59
original
1240 Les gens l'ont consulté

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

比如:

border-radius:2em;
Copier après la connexion

相当于什么?

border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;
Copier après la connexion

实际上,其首先都是水平方向(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;}
Copier après la connexion

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

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

http://caniuse.com/border-radius

 

最昂贵的CSS属性

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

 

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

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal