大家一起學習less 6 一些有用的混合函式

2021-09-06 06:05:24 字數 957 閱讀 9265

預設是淺色。

.gradient(@color: #f5f5f5, @start: #eee, @stop: #fff)
使用示例

.wh

.wh/*最後生成*/

.wh

預設是深色,並且後兩個引數要求是0~256的數值

.bw-gradient(@color: #f5f5f5, @start: 0, @stop: 255)
使用示例

.wh
.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee)
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1)
只有乙個引數

.rounded(@radius: 2px)
有四個引數

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0)
對ie支援不好

.opacity(@opacity: 0.5)
.transition-duration(@duration: 0.2s)
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnrulecolor: #eee, @columnrulestyle: solid, @columnrulewidth: 1px)

大家一起學習less 1 混合

我們先看以下一段例子 less rounded corners radius 5px header footer 生成的 css header footer最上方,其實相當於定義了乙個名為 rounded corners 的函式,它有乙個引數叫 radius,預設值為5px。然後對於接著下來的樣式規...

大家一起學習less 3 命名空間

這其實是 巢狀規則 的公升級版。我們先看官網例子吧 less 這裡是命名空間的定義,裡面包含乙個button方法 bundle 這裡是具體呼叫,通過 yyy方式進行呼叫,本人覺得用 更可靠,起碼長得不像親子選擇器 header a 生成的 css header a header a hover上面的...

一些預言 讓我們一起來見證

華盛頓 紐約 洛杉磯幾個大城市突然相繼出現一些兒童的奇怪行為,他們突然間都相繼不約而同說起一些人類聽不懂的語言,而調查發現,他們無一例外都是深藍兒童,據稱有人第一時間破譯了他們的預言,並翻譯如下 1 2010年3月份到5月份,全球爆發新一輪h1n1變種,當秘密死亡人數較多時候,各國才正式由 確認,為...