LESS知識總結

時間 2019-12-01

標籤知識總結简体版

原文原文鏈接

知識體系

一、認識lesscss

二、使用lesshtml

三、變量（ variables ）node

四、混合（ mixins ） css3

五、嵌套規則（ nested-rules ）編程

六、運算（operations）瀏覽器

七、函數（functions）app

八、命名空間less

九、做用域koa

十、引入（importing）編程語言

十一、關鍵字（ important ）

十二、條件表達式

1三、循環（loop）

1四、合併屬性

1五、函數庫（function）

詳情

初見less	一、什麼是less less是css預編譯器，能夠擴展css語言，添加功能如變量、混合、函數和許多其餘技術。讓css更具維護性、主題性、擴展性。二、less官方網站英文站 http://www.lesscss.org 中文站 http://www.lesscss.net 三、less中的註釋 // 不會被編譯到css文件中 // 會編譯到css文件中四、less的第一次使用 ul{ background:#ff0; li{ background:#f0f; a{ background:#0ff;** } } }
正確使用less	如何使用less less只有被編譯後才能被瀏覽器識別使用。 less頭部最好加上 @charset("utf-8") 。 less編譯工具 Koala http://www.koala-app.com Winless http://winless.org CodeKit http://incident57.com/codekit/index.html 客戶端調試方式先引用less文件"rel=stylesheet/less"; 再引用less.js文件。注意：這時不會生成css文件，編譯後的樣式直接會加載在頁面上。
變量	普通變量 @blue：#ff0; input{ background: @blue; } 做爲選擇器和屬性名的變量,注意屬性名必須爲可用的才行。widths 這個就不能經過編譯 @kuandu:width; .@{kuandu}{ @{kuandu}:150px } 做爲URL的變量 @imgurl:"img/a.jpg"; header{ background: @green url("@{imgurl}bdlogo.png"); height: 500px; } 延遲加載變量是延遲加載的，在使用前不必定要先申明。定義多個相同名稱的變量時 @var: 0; .class { @var: 1; .brass { @var: 2; three: @var; //這是的值是3 同級別中最後一個，順序無所謂 @var: 3; } one: @var; //這是的值是1 }
混合	普通混合 font_hn會輸出到css文件中 .font_hn{ color: red; font-family: microsoft yahei； } h1{ font-size: 28px; .font_hn; } 不帶輸出的混合，類名後面使用( )；font_hn不會在css文件中輸出 .font_hn( ){ color: red; font-family: microsoft yahei; } h1{ font-size: 28px; .font_hn; } 帶選擇器的混合 &選擇的是全部的父級元素 .my-hover-mixin { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); } 帶參數的混合 .border(@color){ //參數不帶有默認值 border: 1px solid @color; } h1{ &:hover{ .border(green); //因爲沒有默認值，這裏必須傳參，不然報錯 } } 帶參數而且有默認值的混合 .border_you(@color:red){ border: 1px solid @color; } h1{ &:hover{ .border_you( ); //不傳參的狀況下，使用的是默認red } } 帶參數而且有默認值的混合若是傳參的括號裏面所有都是以「，」分割，那麼會依次傳給各個參數值，若是傳參的括號裏面既有「，」又有「；」那麼，會把「；」前面的看做一個總體，傳給一個參數值。 .mixin(@color; @padding:xxx; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .divmaizi{ .mixin(red;) } 定義多個具備相同名稱和參數數量的混合 .mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } 命名參數 .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } .class3{ .mixin(@padding: 80px;) } arguments .border(@x:solid,@c:red){ border: 21px @arguments; } .div1{ .border(solid); } 匹配模式 .border(all,@w: 5px){ border-radius: @w; } .border(t_l,@w:5px){ border-top-left-radius: @w; } .border(t_r,@w:5px){ border-top-right-radius: @w; } .border(b-l,@w:5px){ border-bottom-left-radius: @w; } .border(b-r,@w:5px){ border-bottom-right-radius: @w; } footer{ .border(t_l,10px); .border(b-r,10px); background: #33acfe; } 混合的返回值 .average(@x, @y) { @average: ((@x + @y) / 2); @he:(@x + @y); } div { .average(16px, 50px); padding: @average; margin: @he; }
嵌套規則	什麼是嵌套規則模仿html結構，讓css代碼更加簡潔明瞭清晰。 header{ width: 960px; h1{ font-size: 18px; color: green; } .logo{ width: 300px; height: 150px; background: darkred; &:hover{ background: forestgreen; } } } & 說明：表示當前選擇器的全部父選擇器。 & 插入到選擇器以後，就會將當前選擇器插入到父選擇器以前。 .a{ .b{ .c&{ color: 123; } } } 編譯後 .c .a .b{ color: 123; } 組合生成全部可能的選擇器列表 p, a, li { border-top: 2px dotted #366; & & { border-top: 0; } } 編譯後 p p, p a, p li, a p, a a, a li, li p, li a, li li{ border-top: 0; }
運算	運算說明（運算符與值之間必須以空格分開，涉及優先級時以「( ) 」優先）任何數值、顏色和變量均可以進行運算； less會自動推斷數值的單位，全部沒必要全部數值都加上單位。 .wp{ margin: 0 auto; background: forestgreen; width: 450px + 450; height: 400 + 400px; } //涉及到優先級，使用()區分優先級 .wp{ margin: 0 auto; width: (550 - 50)*2 + 24px; height: 400 + 400px; background:#ff0000 - 55; //#000021 c8c8c8 } //rgb模式他的值是 0~255 ，當你的值超過255 ，那麼就會以255進行相加操做
函數	Less提供了許多用於轉換顏色，處理字符串和進行算術運算的函數。 .bgcolor{ background :rgb(0,133,0) ; z-index: blue(#050506); } 編譯後 .bgcolor{ background :#008500; z-index: 6; }
命名空間	什麼是命名空間在less中，咱們須要將一些混合組合在一塊兒，能夠經過嵌套多層id或者class實現。 #bgcolor(){ background: #ffffff; .a{ color: #888888; &:hover{ color: #ff6600; } .b{ background: #ff0000; } } } .bgcolor1{ background: #fdfee0; #bgcolor>.a; } 注意：">"能夠省略不寫
做用域	什麼是做用域 less中的做用域與編程語言中的做用域概念很是類似，首先會在局部查找變量和混合。若是沒找到，編譯器就會在父做用域中查找，依次類推。 @clolor:#ffffff; .bgcolor{ width: 50px; a{ color: @clolor; //#ff0000 } } @clolor:#ff0000;
引入	什麼是引入你能夠引入一個或多個.less文件，而後這個文件中的全部變量均可以在當前的less項目中使用！ @import "main.less"; @import (reference) "main.less"; //引用LESS文件，可是不輸出 @import (inline) "main.less"; //引用LESS文件，可是不進行操做 @import (once) "main.less"; //引用LESS文件，可是不進行操做 @import (less) "index.css"; //不管是什麼格式的文件，都把他做爲LESS文件操做 @import (css) "main.less"; //不管是什麼格式的文件，都把他做爲CSS文件操做 @import (multiple) "main.less"; //multiple，容許引入屢次相同文件名的文件 @import (multiple) "main.less"; //multiple，容許引入屢次相同文件名的文件 @import (multiple) "main.less"; //multiple，容許引入屢次相同文件名的文件 .centen{ width:@wp; .color; } 注意：引用.css文件，會被原樣輸出到編譯文件中！
關鍵字	什麼是 !important關鍵字在調用的混合集後面追加 !important 關鍵字，可使混合集裏面的全部屬性都繼承!important。 .foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; font-size: 16px; font-weight: 900; } .unimportant { .foo(); } .important { .foo() !important; } 注意：會提高全部樣式的權重，儘可能少用，不推薦使用。
條件表達式	>,>=,=,<=,<,true .mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5 background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } .class1 { .mixin(#7e7e7e) } //221 > 127.5 >50% background-color: black; 7e7e7e = 126 .class2 { .mixin(#808080) } //85 <127.5 <50% background-color: white; 808080 = 128 類型檢查函數能夠基於值的類型來匹配函數 iscolor isnumber isstring iskeyword isurl .mixin (@a) when (iscolor(@a)) { background-color: black; } .mixin (@a) when (isnumber(@a) ) { background-color: white; shuzi:shuzi; } .mixin (@a) { color: @a; } .class1 { .mixin(#7e7e7e) } //background-color: black; .class2 { .mixin(123) } //background-color: white; 單位檢查函數能夠基於值的類型來匹配函數 ispixel ispercentage isem isunit .mixin (@a) when (ispixel(@a)) { background-color: black; } .mixin (@a) when (ispercentage(@a) ) { background-color: white; } .mixin (@a) { width: @a; } .class1 { .mixin(960px) } //background-color: black; width:960px .class2 { .mixin(95%) } //background-color: white;width:95%
循環	在less中，混合能夠調用它自身，這樣，當一個混合遞歸調用本身，再結合Guard表達式和模式匹配這兩個特性，就能夠寫出循環結構. .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 遞歸調用自身 4 3 2 1 0 width: (10px * @counter); // 每次調用時產生的樣式代碼30px 20px 10px } div { .loop(3); // 調用循環 } .loop(@counter) when (@counter > 0) { h@{counter}{ padding: (10px * @counter); }// 每次調用時產生的樣式代碼 .loop((@counter - 1)); // 遞歸調用自身 } div { .loop(6); // 調用循環 }
合併屬性	"+"逗號分隔所合併的屬性值在須要合併的屬性的：的前面加上+就能夠完成合並，合併以，分割屬性 //+ 合併之後，以逗號分割屬性值 .mixin() { box-shadow+: inset 0 0 10px #555 ; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } //+_ 合併之後，以空格分割屬性值 .a(){ background+:#f60; background+_:url("/sss.jod") ; background+:no-repeat; background+_:center; } .myclass { .a() } //background+_:#f60 url("/sss.jod"); 注意：當前使用的是哪一個，就以這個想加。

函數庫

一、其餘函數

color() 函數解析顏色，將表明顏色的字符串轉換爲顏色值

color(「#f60」)

convert()函數將數字從一種類型轉換到另外一種類型

長度單位：m、cm、mm、in（英寸）、pt（磅）、px、pc（派卡）

時間單位：s、ms

角度單位：rad（弧度）、deg（度）、grad（梯度）、trun（圓）

convert(1s,mm) convert(20cm,px)

data-uri()函數將一個資源內嵌到樣式文件，若是開啓了ieCompat選項，並且資源文件的體積過大，或者是在瀏覽器中使用，則會使用url進行回退。若是沒有直達MIME，則node.js會使用MIME包來決定正確的MIME。

background:data-uri("a.jpg");

編譯後：background:url(data:image/jpeg:base64,/9j/...........) 變成base64位的編碼

default()函數只能邊界條件中使用，沒有匹配到定義其餘函數（mixin）的時候返回true，不然返回false。

.x(1) { x:11 }

.x(2) { y:22 }

.x(@x) when (default()) {z:@x} //當@x != 1 也 !=2 時，使用默認的

.div1{

.x(1) //x:11

}

.div2{

.x(123) //z:123

}

.x(@x) when (ispixel(@x)) {width:@x}

.x(@x) when not(default()) {padding:(@x/10)}

.div1{

.x(100px)

}

.div2{

.x(100cm);

color:red;

}

unit()函數移除或者改變屬性值的單位

div{

width: unit(100px); //100

width: unit(100px,cm); //100cm

width: unit(100,px); //100px

}

二、字符串函數

escape()函數將輸入字符串的url特殊字符進行編碼處理

不轉義的編碼：, / ? @ & + ' ~ ! $

轉義的編碼：# ^ ) ( } { | ; > < : ] [ =

d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');

e()函數 css轉義用~「值」符號代替。

filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");

filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

width: calc(960px-100px); //css3新增屬性能讓你給元素作計算

width: calc(~'960px-100px'); //原樣輸出，讓瀏覽器本身運算

%()函數函數%(string,arguments......) 格式化一個字符串。

font-family: %( "%a %a" , "Microsoft", "YaHei");

編譯結果: font-family: ""Microsoft" "YaHei"";

font-family: %( "%A %a" , "Microsoft", "YaHei");

編譯結果: font-family: "%22Microsoft%22 "YaHei"";

font-family: %( "%s %s" , F60, "YaHei");

編譯結果: font-family: %( "%s %s" , "Microsoft", "YaHei");

font-family: "Microsoft YaHei";

replace()函數用另外一個字符串替換文本。

content: replace("Hello, maizi", "maizi", "LESS");

編譯結果：content:"Hello, LESS";

content: replace("Hello, A", "A", "B");

編譯結果：content:"Hello, B";

三、長度相關函數

length() 返回集合中值的個數

n:length(1px solid #0080ff);

編譯後：n:3

extract() 返回集合中指定索引的值

@list: "A", "B", "C", "D";

n:extract(@list,4) // n:"D";

四、數學函數

ceil() 向上取整

floor() 向下取整

percentage() 將浮點數轉換爲百分比

round() 取整和四捨五入

sprt() 計算一個數的平方根，原樣保持單位

abs() 計算數字的絕對值，原樣保持單位

sin() 正弦函數

asin() 反正弦函數

cos() 餘弦函數

acos() 反餘弦函數

tan() 正切函數

atan() 反正切函數

pi() 返回π(pi)

pow() 乘方運算

mod() 取餘運算

min() 最小值運算

max() 最大值運算

div{

width: ceil(2.9999999px); //3px

width: floor(2.9999999px); //2px

width:percentage( 0.5px); //將浮點數轉換爲百分比 50%

取整和四捨五入

width:4.5px ;

width:round(4.5px) ; //5px

width:4.4px ;

width:round(4.4px) ; //4px

計算一個數的平方根，原樣保持單位。

width: sqrt(16px); //4px

width: sqrt(9px); //3px

計算數字的絕對值，原樣保持單位。

top: -999px;

top: abs(-999px); //999px

width: sin(1); //1弧度角的正弦值

width: sin(1deg);//1角度角的正弦值

width: sin(1grad); //1百分度角的正弦值

反正弦值

width: asin(-0.84147098);

width: asin(0);

width: asin(2);

width: cos(1); //1弧度角的餘弦值

width: cos(1deg);//1角度角的餘弦值

width: cos(1grad); //1百分度角的餘弦值

width: tan(1); //1弧度角的正切值

width: tan(1deg);//1角度角的正切值

width: tan(1grad); //1百分度角的正切值

width: pi(); //3.14159265

乘方運算

width: pow(2px,2); //4px

width: pow(3px,2); //9px

width: pow(4px,2); //16px

width: pow(25px,0.5); //5px

mod()取餘

width: mod(3px,2); //1px

width: min(3px,2px,1px); 1px

width: max(3px,2px,1px); 3px

}

五、類型函數

isnumber() 若是值是數字，返回真（true），不然返回假（false）

isstring() 若是值是一個字符串，返回真（true），不然返回假（false）

iscolor() 若是值是一個顏色，返回真（true），不然返回假（false）

iskeyword() 若是值是一個關鍵字，返回真（true），不然返回假（false）

isurl() 若是值是一個url地址，返回真（true），不然返回假（false）

ispixel() 若是值是帶px單位的數字，返回真（true），不然返回假（false）

issem() 若是值是帶em單位的數字，返回真（true），不然返回假（false）

ispercentage() 若是值是一個帶%單位的數字，返回真（true），不然返回假（false）

isunit() 若是值是帶指定單位的數字，返回真（true），不然返回假（false）

//若是一個值是一個數字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (isnumber(@x)) {

x:@x

}

div{

.m(123); //x:123

.m(ABC);

}

//若是一個值是一個字符串，返回'真(true)',不然返回'假(false)'.

.m(@x) when (isstring(@x)) {

x:@x

}

div{

.m(123);

.m("ABC"); //x:"ABC"

}

//若是一個值是一個顏色，返回'真(true)',不然返回'假(false)'.

.m(@x) when (iscolor(@x)) {

x:@x

}

div{

.m(123);

.m(red); //x:#ff0000

}

//若是一個值是一個關鍵字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (iskeyword(@x)) {

x:@x

}

div{

.m(123);

.m("ABC");

.m(red);

.m(ABC); //x:ABC

}

//若是一個值是一個url地址，返回'真(true)',不然返回'假(false)'.

.m(@x) when (isurl(@x)) {

x:@x

}

div{

.m(ABC);

.m(url(arr.jpg)); //x:url(arr.jpg)

}

//若是一個值是帶像素長度單位的數字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (ispixel(@x)) {

x:@x

}

div{

.m(220px); //x:220px

.m(220cm);

}

//若是一個值是帶em長度單位的數字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (isem(@x)) {

x:@x

}

div{

.m(220px);

.m(240em); //x:240em

}

//若是一個值是帶百分比單位的數字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (ispercentage(@x)) {

x:@x

}

div{

.m(220px);

.m(240em);

.m(260%); //x:260%

}

//若是一個值是帶指定單位的數字，返回'真(true)',不然返回'假(false)'.

.m(@x) when (isunit(@x,em)) {

x:@x

}

div{

.m(123);

.m(220px);

.m(240em); //x:240em

.m(280em); //x:280em

.m(290em); //x:290em

.m(260%);

}

六、顏色值定義函數

rgb() 經過十進制紅、綠、藍（RGB）建立不透明的顏色對象

rgba() 經過十進制紅、綠、藍（RGB），以及alpha四種值（RGBA）建立帶alpha透明的顏色對象

argb() 建立格式爲#AARRGGBB的十六進制顏色，用於iE濾鏡，.net和安卓開發

hls() 經過色相，飽和度，亮度（HLS）三種值建立不透明的顏色對象

hsla() 經過色相，飽和度，亮度，以及alpha四種值（HLSA）建立帶alpha透明的顏色對象

hsv() 經過色相，飽和度，色調（HSV）建立不透明的顏色對象

hsva() 經過色相，飽和度，亮度，以及alpha四種值（HSVA）建立帶alpha透明的顏色對象

//經過十進制紅色，綠色，藍色三種值 (RGB) 建立不透明的顏色對象。

div{

background: rgb(255,0,0);

background: rgb(100%,0%,0%);

}

//經過十進制紅色，綠色，藍色，以及 alpha 四種值 (RGBA) 建立帶alpha透明的顏色對象。

div{

background: rgba(255,0,0,0.5);

background: rgba(100%,0%,0%,0.5);

}

//建立格式爲 #AARRGGBB 的十六進制 (hex representation) 顏色 (注意不是 #RRGGBBAA ！)。

div{

background: argb(rgba(255,0,0,0.5));

background: argb(rgba(100%,0%,0%,0.5));

}

//經過色相 (hue)，飽和度 (saturation)，亮度 (lightness) 三種值 (HSL) 建立不透明的顏色對象。

div{

background: hsl(90,100%,50%);

}

//經過色相 (hue)，飽和度 (saturation)，亮度 (lightness)，以及 alpha 四種值 (HSLA) 建立透明的顏色對象。

div{

background: hsla(90,100%,50%,0.5);

}

//經過色相 (hue)，飽和度 (saturation)，色調 (value) 三種值 (HSV) 建立不透明的顏色對象。

div{

background: hsv(90,100%,50%);

}

//經過色相 (hue)，飽和度 (saturation)，色調 (value)，以及 alpha 四種值 (HSVA) 建立透明的顏色對象。

div{

background: hsva(90,100%,50%,8%);

}

七、顏色值通道提取函數

hue() //從HSL色彩空間中提取色相值

saturation() //從HSL色彩空間中提取飽和度

lightness() //從HSL色彩空間中提取亮度值

hsvhue() //從HSV色彩空間中提取色相值

hsvsaturation() //從HSV色彩空間中提取飽和度值

hsvvalue() //從HSV色彩空間中提取色調值

red() //提取顏色對象的紅色值

green() //提取顏色對象的綠色值

blue() //提取顏色對象的藍色值

alpha() //提取顏色對象的透明度

luma() //計算顏色對象luma的值（亮度的百分比表示法）。

luminance() //計算沒有伽瑪校訂的亮度值

div{

// hue()色相值

z-index: hue(hsl(90,100%,50%)); //90

//saturation()飽和度

z-index: saturation(hsl(90,80%,50%)); //80%

//lightness()亮度值

z-index: lightness(hsl(90,100%,100%)); //100%

hsv(90,100%,50%)

z-index:hsvhue( hsv(90,100%,50%)); //函數90

z-index:hsvsaturation( hsv(90,100%,50%)); //函數100%

z-index:hsvvalue( hsv(90,100%,50%)); //函數50%

//rgba(29,199,29,80%)

// 提取紅色

z-index: red(rgba(29,199,150,80%)); //29

// 提取綠色

z-index: green(rgba(29,199,150,80%)); //199

// 提取藍色

z-index: blue(rgba(29,199,150,80%)); //29

// 提取透明度

z-index: alpha(rgba(29,199,150,80%)); //0.8

// 計算顏色對象luma的值（亮度的百分比表示法）。

z-index:luma(rgb(100,200,30));

// 計算沒有伽瑪校訂的亮度值

z-index:luminance(rgb(100,200,30));

}

八、顏色值運算函數

saturate() 增長必定數值的顏色飽和度

desaturate() 下降必定數值的顏色飽和度

lighten() 增長必定數值的顏色亮度

darken() 下降必定數值的顏色亮度

fadein() 下降顏色的透明度（或增長不透明度），令其更不透明

fadeout() 增長顏色的透明度（或下降不透明度），令其更透明

fade() 給顏色（包括不透明的顏色）設定必定數值的透明度

spin() 任意方向旋轉顏色的色相角度

mix() 根據比例混合兩種顏色，包括計算不透明度

greyscale() 徹底移除顏色的飽和度，與desaturate（@color，100%）函數效果相同

contrast() 旋轉兩種顏色相比較，得出哪一種顏色的對比度更大就傾向於對比度最大的顏色

body{

c:hsl(90,80%,50%);

c:saturate(hsl(90,80%,50%),20%);

}

div{

width: 90px;

height: 50px;

font-size: 16px;

text-align: center;

}

.ys1{

background: hsl(90,80%,50%);

}

.ys2{

background: saturate(hsl(90,80%,50%),20%);

}

.ys3{

background: desaturate(hsl(90,80%,50%),20%);

}

.ys4{

background: lighten(hsl(90,80%,50%),20%);

}

.ys5{

background: darken(hsl(90,80%,50%),20%);

}

.ys66{

background:hsla(90,80%,50%,50%);

}

.ys6{

background: fadein(hsla(90,80%,50%,50%),50%);

}

.ys7{

background: fadeout(hsla(90,80%,50%,50%),40%);

}

.ys8{

background: hsl(90,80%,50%);

}

.ys9{

background: fade(hsl(90,80%,50%),40%);

}

.ys10{

background: hsl(10,90%,50%);

}

.ys11{

background: spin(hsl(0,90%,50%),360);

}

.ys12{

background: rgba(100,50,20,0.5);

}

.ys13{

background: rgba(0,150,120,0.2);

}

.ys14{

background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));

}

.ys15{

background: hsl(90,100%,50%);

}

.ys16{

background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)

}

九、顏色值混合函數

multiply() 分別將兩種顏色的紅綠藍三種值作乘法運算，而後再除以255，輸出結果更深的顏色。（對應ps中的「變暗/正片疊底」）

screen() 與multiply函數效果相反，輸出結果更亮的顏色。（對應ps中「變亮/濾色」）

overlay() 結合multiply與screen兩個函數的效果，令淺的顏色更淺，深的顏色更深。（對應ps中的疊加）。輸出結果由第一個顏色參數決定。

softlight() 與overlay函數效果類似，只是當純黑色或純白色做爲參數時輸出結果不會是純黑色或純白色。（對應ps中的「柔光」）

hardlight() 與overlay函數效果類似，不過由第二個顏色參數決定輸出顏色的亮度或黑度，而不是第一個顏色參數決定。（對應ps中「強光/亮光/線性光/點光」）

difference() 從第一個顏色值中減去第二個（分別計算RGB三種顏色值），輸出結果更深的顏色。（對應ps中「差值/排除」）

exclusion() 效果與difference函數效果類似，只是輸出結果差異更小。（對應ps中「差值/排除」）

average() 分別對RGB三個顏色值取平均值，而後輸出結果。

negation() 與difference函數效果相反，輸出結果是更亮的顏色。（效果相反不表明作加法運算）

<div class="ys8">ffffff</div>

body{

c:hsl(90,80%,50%);

c:saturate(hsl(90,80%,50%),20%);

}

div{

width: 90px;

height: 50px;

line-height: 50px;

color: #fff;

font-size: 16px;

text-align: center;

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: multiply(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: multiply(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: multiply(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: screen(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: screen(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: screen(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: overlay(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: overlay(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: overlay(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: softlight(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: softlight(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: softlight(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: hardlight(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: hardlight(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: hardlight(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: difference(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: difference(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: difference(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: exclusion(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: exclusion(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: exclusion(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: average(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: average(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: average(#ff6600,#fff);

}

.ys1{

background:#ff6600 ;

}

.ys2{

background: #000000;

}

.ys3{

background: negation(#ff6600,#000000);

}

.ys4{

background:#ff6600 ;

}

.ys5{

background: #333;

}

.ys6{

background: negation(#ff6600,#333);

}

.ys7{

background:#ff6600 ;

}

.ys8{

background: #ffffff;

}

.ys9{

background: negation(#ff6600,#fff);

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。