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);

}