bootstrap 3.0 LESS源代码浅析(二)_html/css_WEB-ITnose
Jun 24, 2016 pm 12:34 PM
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属性,比其他属性产生更多的计算时间。
所以注意减少单页面过多使用该属性的元素,避免页面产生顿卡现象。

Hot-Tools-Tags

Heißer Artikel

Hot-Tools-Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?

Wie benutze ich den HTML5 & lt; Meter & gt; Element zur Anzeige numerischer Daten innerhalb eines Bereichs?
