css中的各种颜色格式

头条创作挑战赛#

颜色对于 css 来说是非常重要的，网站之所以会呈现出五彩斑斓的样式，就是这些颜色样式起的作用。在 css 中，对于颜色样式有很多种表达方式，今天我们就来盘点下 css 中颜色的格式。

名字颜色

在 css 中，默认定义了很多名字颜色，比较常见的比如 yellow，blue，red，pink 等，实际上，css 中一共定义了 140 个颜色名字，这些名字你都可以直接拿来使用。虽然 140 种看起来很多，但是实际上它比 8bit 的颜色还要少，因此，平时我们很少使用它。

RGB

这是一种颜色格式，从名字我们就知道它是 red，green，blue 三种颜色的简写，我们都知道三原色原理，也就是通过三种基本颜色，我们就可以组合出其它的颜色出来，因此，rgb 就可以表示出我们可以看到的各种颜色。

在 css 中，red，green，blue 被称作三通道，每个通道的值是从 0-255，通过混合这些通道颜色，我们就可以创造出 1600 多万种颜色。需要注意的是 rgb(255,255,255,0.5) 允许我们有第四个参数，它的值从 0-1，用来表示透明度。

.translucent-box {
  background: rgb(255 0 0 / 0.5);
}

Hex Codes

通过十六进制数字来表示颜色代码，6 位数字被分成了三组，每两位一组，一位是 16，两位就是 16*16=256，所以它其实和 RGB 基本是相同的，只不过它是用 16 进制进行表示。

它的三组也是代表着 red，green，blue，和 RGB 一样的是，它也可以指定透明度，也就是说我们可以使用 8 位十六进制来表示颜色。

.translucent-box {
  background: #ffff0080;
}

HSL

和 RGB 不同的是，HSL 是通过指定色调，饱和度，亮度来表示颜色的。

在 HSL 中，我们的色调是在 0deg-360deg 之间，转一圈的大致颜色范围就是红橙黄绿青蓝紫，饱和度是在 0-100%之间，亮度是在 0%-100%之间。

HSL 是可以和 RGB 进行转换的，其中色调的转换公式比较复杂。

.translucent-box {
  background-color: hsl(0deg 100% 2%);
}

P3

P3 是一个在继承 sRGB 色彩空间范围之外，又提供了更亮更充满活力的色彩范围，也就是说 P3 表示的色彩范围要更大。

因此，使用 P3 的时候，需要使用特殊的属性值 color 形式来表示，但是对于 color 这个属性，目前只有 safari 支持。

.translucent-box {
  background: color(display-p3 1 0 0);
}

LCH

因为 HSL 对于不同颜色在表示亮度的时候给人的感觉是不同的，因此，人们发明了 LCH 用来更接近人眼感知的色彩表示方式。

LCH 代表 “亮度色相”。“色度”或多或少是“饱和度”的同义词。它在概念上与 HSL 非常相似，但有两个很大的区别：

如前所述，它优先考虑人类的感知，因此具有相同“亮度”值的两种颜色将感觉同样轻。
它不绑定到任何特定的颜色空间。

与我们看到的其他颜色格式不同，LCH 不受 sRGB 的约束。它甚至没有绑定到 P3！它通过对色度没有上限来实现这一点。

在 HSL 中，饱和度范围从 0%（无饱和）到 100%（完全饱和）。这是可能的，因为我们知道我们正在谈论 sRGB 色彩空间，一个有限的调色板。

但是 LCH 与特定的色彩空间无关，因此我们不知道饱和上限在哪里。它不是一成不变的：随着显示技术的不断改进，我们可以期待显示器达到越来越宽的色域。LCH 将自动能够通过调高色度来引用这些扩展的颜色。谈论面向未来！

.translucent-box {
  background: lch(50% 120 20);
}

总结

CSS 是一种令人惊讶的难以掌握的语言。无论花了多少年练习，总会觉得有很多我不知道的东西。

就目前而言，在 LCH 没有被完全支持的情况下，HSL 也许更加适合表达。

所以说很多时候，当我们以为自己已经很熟悉或者掌握一门语言的时候，其实可能我们才仅仅是刚入门而已，任何知识当我们深入研究的时候我们都会发现我们对它的了解其实并不是真的很透彻。

介

CSS 是什么？

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。

属性和属性值用冒号隔开，以分号结尾。

CSS 四种引入方式：

1.行内式

行内式是在标签的style属性中设定CSS样式。

<div style="..."></div>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。

<head>

    ...

    <style type="text/css">

        ...此处写CSS样式

    </style>

</head>

3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。

导入式会在整个网页装载完后再装载CSS文件。

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此处注意.css文件的路径

    </style>

</head>

4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。

链接式会以网页文件主体装载前装载CSS文件。

<head>

    ...

    <link href="My.css" rel="stylesheet" type="text/css">

</head>

样式应用顺序：

行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
!important 指定样式规则应用最优先

.nick {
    color: yellow !important;
}

选择器（Selector）

基本选择器：

1.通用元素选择器

* 表示应用到所有的标签。

* {color: yellow}

2.标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）

div {color: yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。

语法：#ID名{样式}（ID名不能以数字开头）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

组合选择器：

1.多元素选择器

同时匹配h3,h4标签，之间用逗号分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔。

    div p {color: yellow;}
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔。

    div > p {color: yellow;}
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

    div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>

属性选择器：

1.[title] & P[title]

设置所有具有title属性的标签元素；

设置所有具有title属性的P标签元素。

    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]

设置所有title属性等于“Nick”的标签元素。

    [title="Nick"]
    {
        color: yellow;
    }
<p title="Nick">Nick</p>

3.[title~=Nick]

设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

    [title~="Nick"]
    {
        color: yellow;
    }
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。

例：lang属性："en"、"en-us"、"en-gb"等等

    [title|="Nick"]
    {
        color: yellow;
    }
 <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

设置属性值以指定值开头的每个标签元素。

    [title^="Nick"]
    {
        color: yellow;
    }
<p title="NickJenny">Nick</p>

6.[title$=Nick]

设置属性值以指定值结尾的每个标签元素。

    [title$="Nick"]
    {
        color: yellow;
    }
<p title="JennyNick">Nick</p>

7.[title*=Nick]

设置属性值中包含指定值的每个元素

[title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

伪类选择器：

1. link、hover、active、visited

a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

    a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red} 
<a href="#">Nick</a>

2. before、after

P:before 在每个<p>元素的内容之前插入内容;
P:after 在每个<p>元素的内容之后插入内容。

    p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
 <p> Nick </p>

常用属性

1. 颜色属性：

color

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

2. 字体属性:

font-style: 用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示

font-weight: 设置文本的粗细

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

font-size: 设置字体的大小

默认值：medium
<absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用长度值指定文字大小，不允许负值。

font-family：字体名称

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

语法：font：字体大小/行高字体;（字体要在最后）

3. 文本属性:

white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left
center
right

line-height: 文本行高

normal 默认

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        div {
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁</div>
</body>
</html>

text-decoration: 文本的装饰

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
text-shadow: 5px 5px 5px #888;

word-wrap：自动换行

word-wrap: break-word;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 150px;
            height: 160px;
            background-color: #FFA500;
            /*边框阴影*/
            box-shadow: 10px 10px 5px #888;
            /*自动换行*/
            word-wrap: break-word;
        }
        h1 {
            text-shadow: 5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <p>
        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
    </p>
    <h1>索宁</h1>
</body>
</html>

a {
    text-decoration: none;
    /*去除a标签下划线*/
}

4. 背景属性

background-color: 背景颜色

background-image 设置图像为背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

no-repeat 设置图像不重复，常用
round 自动缩放直到适应并填充满整个容器
space 以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志
decimal-leading-zero; 02.
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside
outside

list-style：缩写

页面布局

1. 边框

border-style：边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

1个参数：四个角度应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺时针）

border: 简写

border: 2px yellow solid;

box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border:2px solid;
            border-radius:25px;
            width: 140px;
        }
    </style>
</head>
<body>
    <div>
         点赞哦！dear. 
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
    </div>
</body>
</html>

边框实现各种三角符号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }
 
        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

2.★ 盒子模型

一个标准的盒子模型：

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

一个参数，应用于四边。

　两个参数，第一个用于上、下，第二个用于左、右。

　三个参数，第一个用于上，第二个用于左、右，第三个用于下。

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。

解决方法：
body {
    margin: 0;
}

3.★ display

none 不显示。
block 显示为块级元素。
inline 显示为内联元素。
inline-block 行内块元素（会保持块元素的高宽）。
list-item 显示为列表元素。

4. visibility

visible 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

5.★ float 浮动

让一行显示两个块级标签，会脱离文档流

none
left 左浮动
right 右浮动

clear 清除浮动：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

6. clip 剪裁图像

rect 剪裁定位元素：

auto 默认值，无剪切
上-右-下-左（顺时针）的顺序提供四个偏移值
区域外的部分是透明的
必须指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

8.★ position 规定元素的定位类型

通过以下四种属性进行定位：

left
top
right
bottom
z-index

9. z-index 元素层叠顺序

z-index 仅在定位元素上有效（例：position:absolute;）
可以指定负数属性值（例：-1;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
        .z-index2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
</body>
</html>

10. outline 边框轮廓

outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式

11. zoom 缩放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1">Nick 100%</div>
    <div class="zoom2">Nick 200%</div>
    <div class="zoom3">Nick 300%</div>
</body>
</html>

12. cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

url: 自定义光标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

Auto: 默认
Default: 默认
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

13. transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。
translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 30px;
            width: 30px;
            background-color: yellow;
 
            /*transform-origin: 50px 50px;*/
            transform-origin: left;
            transform: rotate(50deg);
            /*transform: skew(50deg,50deg);*/
            /*transform: translate(50px,50px);*/
            /*transform: scale(2);*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Transition 平滑过渡

transition-property：变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
transition-duration：变换持续时间
transition-timing-function：变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
transition-delay：变换延迟时间
transition：缩写

#property 指定属性对应类型

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

#支持执行transition效果的属性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

鼠标放在以下图片上，There will be a miracle：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .img-see-2016-7-2 {
            background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
            background-size: 660px;
            background-repeat: no-repeat;
            height: 300px;
            width: 600px;

            transition-duration: 30s;
            transition-timing-function: ease;
            transition-property: background-size;
        }
        .img-see-2016-7-2:hover {
            background-size: 2000px;
        }
    </style>
</head>
<body>
    <div class="img-see-2016-7-2"></div>
</body>
</html>

作者：suoning
原文链接：https://www.cnblogs.com/suoning/p/5625582.html

文翻译自 Color Formats in CSS，作者：Joshwcomeau。略有删改

CSS 中的颜色格式可以采用不同的表示方式，包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式，使用 6 个十六进制数字来表示颜色，例如 #FF0000 表示红色；RGB 格式使用红、绿、蓝三个颜色通道的数值来表示颜色，例如 rgb(255,0,0) 也表示红色；RGBA 格式在 RGB 的基础上增加了一个透明度通道，用于控制颜色的不透明度；HSL 格式利用色相、饱和度和亮度三个参数来表示颜色，例如 hsl(0,100%,50%) 表示红色；而 HSLA 格式则在 HSL 的基础上增加了一个透明度通道。选择和使用这些不同的颜色格式时，需要考虑实际需求并进行决策。

对于不同的颜色格式，它们之间存在一些重要的区别。本文将带您深入了解这些选项，包括它们的工作原理、如何解析它们以及如何灵活应用，以下是原文翻译。

CSS有很多不同的颜色格式：hex codes，rgb（），hsl（），lch（），等等！

我们应该用哪一个？这似乎是一个无关紧要的决定，但它们之间却有一些非常重要的区别。而且，老实说我认为我们大多数人都在优先考虑使用错误的方式。

在本教程中，我将带您浏览不同的选项。我们将看到它们是如何工作的，以及我们如何利用它们为我们更好的服务。后面我将向您展示现代CSS如何让我们在选择正确的颜色格式时进行动态调整。

命名式颜色名

这并不是一个真正的颜色格式，但它是一个很好的开始！

HTML有140种命名颜色。这些是特殊的关键字值，如dodgerblue、hotpink和tomato。

开发人员Anthony Lieuallen创建了这个简洁的演示，在一个圆圈中显示了所有140种命名的Web颜色：

由Anthony Lieuallen创作，MIT许可

当你需要一个占位符颜色时，命名式颜色名是很好的。例如，如果您正在构建原型并需要临时值，或者如果您正在编写教育内容。在可读性方面，没有什么比color: red更好。

这可能是不言而喻的，实际开发中140种颜色是不够的，通常不会使用命名的颜色在生产环境中。

看看这两种命名的颜色：
“darkgray”实际上是比“gray”更浅的颜色？这是因为140种命名的Web颜色来自不同的地方，包括HTML4规范，X11 Unix窗口系统等。这是一个不同调色板的大杂烩，没有一个好的规范约束。

RGB

这是我们的第一个“真实的”颜色格式。以下是我们如何使用它：

color: rgb(255 0 0);

对应显示的样式如下：

像大多数颜色格式一样，rgb是一个缩写。它代表绿色蓝。

在我们今天要学习的所有颜色格式中，rgb是最不抽象的。你的电脑/手机显示屏实际上只是数百万个微小的红色、绿色和蓝色LED的集合，它们被组装成像素。因此，rgb颜色格式允许我们直接调整这些灯光的亮度。

每个值（红色、绿色、蓝色）被称为通道。每个通道从0到255。通过将这些通道以不同的量混合，我们可以创造超过1600万种不同的颜色。

RGB颜色的巧妙之处在于它是基于光的物理学。我们可以混合红色、绿色和蓝色光来创造任何颜色。把它们调到255，我们得到白色。把它们都设为0，剩下黑色。

rgb color格式还允许我们为alpha通道指定第四个可选值，以控制透明度：

background: rgb(255 0 0 / 0.5);

以上代码设置了红色50%的透明度，最终的样式的如下：

Alpha通道的范围从0（完全不可见）到1（完全不透明）。介于两者之间的任何东西都会产生半透明的颜色。

十六进制颜色

这可能是网络上最常用的颜色格式。它看起来像这样：

color: #FF0000;

它的工作原理如下：6位十六进制码包含三个2位值，每个通道一个值（红/绿色/蓝）。它不使用10位十进制系统，而是使用16位十六进制系统。

以下图示可以更加了解十六进制代码的工作原理（原文可拖动滑块实时更新颜色）：

基本上，十六进制代码与RGB值相同。在这两种情况下，我们都为红色、绿色和蓝色提供了一个值。 background: #FFFF0080; 在十进制系统中，一个两位数的值可以包含100个可能的值（10 × 10）。如果是十六进制，则总数为256（16 × 16）。因此，它实际上就像rgb()一样，我们为每个R/G/B通道指定一个介于0和255之间的值。

还有个有趣的事实如果我们想包含一个alpha通道，我们可以传递一个八位十六进制代码：

background: #FFFF0080;

代码效果图：

在本例中，我们指定80作为alpha通道，相当于十进制系统中的128。因此，这个盒子是50%不透明的。

8位十六进制代码在现代浏览器中得到了广泛应用，全球支持率达到96％，IE浏览器不支持。

HSL

到目前为止，我们看到的两种颜色格式都是基于相同基本思想的不同“包装器”：传递红/绿色/蓝通道的特定值。

但这并不是思考颜色的唯一方式！让我们来看看一个完全不同的颜色格式：HSL。

让我们从颜色选择器开始：

这个颜色选择器可能感觉更熟悉。它类似于图形设计软件中使用的图形设计软件，如Figma或Photoshop。

此颜色格式采用3种不同的值：

H 色相：这是我们要用的颜色，有效值的范围是0到360。我们以度为单位指定它，因为刻度是圆形的（0度和360度表示相同的红色色相）。
S 饱和度：有效值的范围为0%到100%。在0%时，颜色中没有色，完全是灰度级的。在100%，颜色尽可能鲜艳。
L 亮度：颜色有多浅/多深？有效值的范围为0%到100%。在0%时，颜色是漆黑的。在100%时，颜色为纯白色。

这往往是一个非常直观的方式来思考颜色。我们没有直接控制R/G/B光值，而是转向了更高层次的抽象，这与人类通常对颜色的看法更接近。

css中使用hsl：

background: hsl(0deg 100% 50% / 0.5);

现代色彩格式

所以，我们到目前为止看到的所有颜色格式都已经存在了很多很多年。HSL甚至早在Internet Explorer 9（2011年发布）中就支持了！

最近我们在CSS中得到了一些新的颜色格式。它们很有吸引力。让我们谈谈他们。

Display P3

这篇文章是关于颜色格式，我们用来指定颜色的语法。到目前为止，我们看到的所有真彩色格式 rgb()、十六进制代码和hsl() 都是由“标准RGB颜色空间”（通常缩写为sRGB）所约束的。

sRGB中有数百万种可能的颜色，但它并没有接近捕捉人眼能够看到的全部颜色范围。

请看下面两个红色方块：

左边的颜色是rgb(255 0 0)。它是sRGB颜色空间中最红的红色。然而，在右边，我使用的是P3颜色空间。更红了！（这两个方块看起来很有可能是一样的。如果是这样，这可能意味着您的显示器或浏览器不支持宽色域颜色格式）

P3扩展了标准的sRGB色彩空间，使我们能够获得更明亮，更鲜艳的色彩。如下图所示：

不幸的是，在CSS中，颜色空间与颜色格式相关联。如果我选择使用rgb()语法（或十六进制代码，或hsl()），我只能在sRGB颜色空间中指定颜色。

因此，如果我们想使用P3颜色，我们需要使用不同的颜色格式。语法如下：

.box {
  background: color(display-p3 1 0 0);
}

color()函数接受一个颜色空间，然后是一组R/G/B值。它使用0到1的十进制值，而不是从0到255。但目前只有主流的浏览器对color()函数支持。

LCH

我们使用HSL颜色格式创建以下两种颜色：

正如我们所看到的，这两种颜色都具有相同的50%的“亮度”值。但它们感觉不一样轻，黄色的感觉比蓝色的轻多了！

HSL颜色格式是在数学/物理之后建模的。它没有考虑到人类的感知。而且，事实证明，人类并不能非常准确地感知颜色！

LCH是一种颜色格式，旨在对人类感知一致。两种颜色具有同等的“亮度”值应该感觉同样轻！

例如，在LCH中，黄色和蓝色在55%亮度下的样子：

LCH代表“亮度色度色调”。“色度”或多或少是“饱和度”的同义词。它在概念上与HSL非常相似，但有两个很大的区别：

如上所述，它优先考虑人类感知，因此具有相同“亮度”值的两种颜色将感觉同样亮。
它不受任何特定颜色空间的约束。

与我们看到的其他颜色格式不同，LCH不绑定到sRGB。它甚至没有绑定到P3！它通过不具有色度上限来实现这一点。

在HSL中，饱和度范围从0%（无饱和）到100%（完全饱和）。这是可能的，因为我们知道我们谈论的是sRGB颜色空间，一个有限的颜色调色板。

但是LCH并没有链接到特定的颜色空间，所以我们不知道饱和度上限在哪里。它不是静态的：随着显示技术的不断改进，我们可以预期显示器将达到越来越宽的色域。LCH将自动能够通过调高色度来参考这些扩展的颜色。

background: lch(50% 120 20);

浏览器支持情况：

选择正确的颜色格式

文章的主要内容已经结束了，我们看到了许多不同的颜色格式。那么应该在工作中真正使用哪一个呢？

我建议使用HSL。至少在LCH获得广泛的浏览器支持之前。

我知道很多开发者喜欢使用十六进制代码。它们简洁，易于在设计软件和我们的代码之间复制/粘贴，并且通用。但这些好处也伴随着一些相当大的权衡。

即使你对十六进制符号很熟悉，它仍然很难直观破译。问：#0F52B7是什么颜色？#F3E248怎么样？

HSL的奇妙之处在于它是直观的。它与我们对颜色的看法密切相关。通过一些练习，当您看到hsl()值时，您将能够立即描绘任何颜色。

这意味着我们可以很容易地调整值，在运行中。我甚至不需要打开一个颜色选择器。如果我希望我的颜色稍微暗一点，我可以减少亮度百分比。如果我想让它更生动和激烈，我可以调高饱和度。

当我们将HSL与现代CSS特性相结合时，它会变得更加强大。

最后

有兴趣的可以看看原文，可以在线体验不同颜色格式是如何工作的。看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

在线咨询

上一篇：thinkphp3.2之URL简化设置
下一篇：PDF文件简易目录生成器-为PDF文件添加书签的工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商