Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > bootstrap 3.0 LESS源代码浅析（二）_html/css_WEB-ITnose

bootstrap 3.0 LESS源代码浅析（二）_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 12:34:59
Original
1239 Leute haben es durchsucht

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

比如：

border-radius:2em;
Nach dem Login kopieren

相当于什么？

border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;
Nach dem Login kopieren

实际上，其首先都是水平方向（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;}
Nach dem Login kopieren

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

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

http://caniuse.com/border-radius

 

最昂贵的CSS属性

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

 

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

 

Verwandte Etiketten：
bootstrap 3.0 LESS源代码浅析（二）
Quelle：php.cn
Vorheriger Artikel：<jsp:forward>、requestDispatcher和sendRedirect()的区别_html/css_WEB-ITnose Nächster Artikel：IE6,IE7下设置body{overflow:hidden;}失效Bug (转)_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2042
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2201
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1858
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1745
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1766
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage