CSS参考

取色

css支持多种取色方式。下面会列举取色的方法。

16进制取色(HEX)

格式:#ABCDEF #001234(如果需要加上通道alpha值,那么则会变为#ABCDEFCC #001234CC)

16进制取值为0~F,如下是取色的一些实例
这是黑色(#000000)

这是蓝色(#12425F)

当然,上述颜色未加上alpha值,加上alpha值可以调整颜色的不透明度
这是黑色,50%不透明度(#00000080)

这是黑色,75%不透明度(#000000BF)

下面附上各种不透明度对应的16进制数值
不透明度 16进制数值
100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
0% 00

RGB取色

格式:rgb(127,127,127) (如果需要加上通道alpha值,则会是rgba(127,127,127,127,0.5)。注:0.5也可以写成50%)

RGB的取值为3个,每个都为0~255。第一个对应红色,第二个对应绿色,第三个对应蓝色。颜色是从黑色开始的,rgb(0,0,0)是黑色,rgb(255,255,255)是白色。
这是黑色(rgb(0,0,0))

这是蓝色(rgb(18,66,95))
当然,上述颜色未加上alpha值,加上alpha值可以调整颜色的不透明度

这是黑色,50%不透明度(rgba(0,0,0,0.5))

这是黑色,75%不透明度(rgba(0,0,0,0.75))

HSL取色

格式:hsl(240,50%,50%)(如果需要加上通道alpha值,则会是hsla(240,50%,50%,0.5))

HSL的取值分别为:色相,饱和度,亮度。后面可以加上不透明度。

渐变色

linear-gradient参数可以实现渐变色,其格式如下。

background-image:linear-gradient(180deg, red 0%, green 50%, blue 100%)

有4个参数,但是其中有一些可以省略。例如如果第一个参数(180deg)不写,默认值就是180deg。而在每个颜色后面的百分数也可以省略。对于3个颜色,那么第一个颜色就是0%,第二个颜色就是50%,第三个颜色就是100%。

下面是渐变色的示例。

从左到右渐变:

.

从上到下渐变:

.

注意
1.此参数最少需要2个颜色才能正常工作!
2.此参数是作为背景图像调用的,前方需要有background-image:

Viewport移动端适应

<meta name="viewport" content="width=device-width, initial-scale=1.0">
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!