站开发入门指南:多种色值写法。
接下来给大家介绍几个常用的设置颜色色值的方式。颜色色值的设置在样式设置中是非常常用的,包括背景颜色、渐变颜色、边框颜色、字体颜色等等,很多的地方都可能需要用到颜色色值的设置。
·之前已经讲过一种最基础的方式,就是这种关键字的方式,也就是用英文单词这样的方式。之前讲过有很多颜色的名字都是可以用的,像之前一直用的设置颜色的方法也都是这种色值的方式,这种关键字的方式。
·另外一种是非常常用的,是十六进制。十六进制概念如果不理解其实也没有关系,可以简单的把它理解为有十六个数,0123456789,然后是aobcdef,从0到f是从小到大的逻辑。
它的写法大概是这样的样子,16进制的颜色的写法大概是这样的样子。这个样子的特点就是一开头这里是有个井号,然后是两两一组的,第一组就是表示红色,第二组是表示绿色,第三组是表示蓝色。
·ff就表示颜色,比如这里是红色,它是最浓的,颜色强度是最大的。三种颜色就相当于也是三原色去拼,拼起来就混合成一种最终的颜色效果。
·00就表示颜色没有绿色的色值,这里如果也是ff就表示蓝色也是最浓的。所以可以尝试的去把它设置一下,会发现它就变成了这样的颜色。
·像这种写法其实如果两两的字符是一样,其实可以简写成这样的一种写法。这两者其实相当于是一样的了。
有几种非常常用的颜色的色值,其实一看就应该知道的,给大家罗列一下。比如这种3个f,也就是这种6个f,其实是一样的,这个明显就是一个白色了,3个0就是没有,这个跟6个0是一样的,就是纯黑。
像这种直接写6个的,就是红色,正红色,ff放中间其实就是绿色,这样就是一个蓝色,这个应该都很好理解,就是三原色的概念。如果不了解三原色的概念,可以自己去查资料了解一下,可以给它去设置一下,看一下是不是蓝色,大家可以看到就是一个蓝色,这是16进制的最基本的用法。
但是它其实还可以加两位,加两位之后,最后的两位就是表示的是不透明度的概念。不透明度的概念其实这里也可以称作是alpha,阿尔法其实就是可以表示是不透明度的概念。像这00就是最小,就是0的不透明度,就是最小的不透明度,就是完全透明。
也可以试一下,比如用这里给它加一个00,这就没有了,ff其实不加不透明度的设定,其实它的不透明度就是1,就是完全的看得见,没有任何的透明的状态。
像这个颜色,这个16进制的色值,其实是不用去记的,因为很多设计软件里面都非常方便的去给到颜色的16进制的色值。比如可以看到这样的figma设计软件,选择填充颜色,会看到这里有很多的颜色的选项可以选,其中最好复制的就是HEX,HEX就是表示16进制,16进制颜色一复制,放到CSS代码里面,就直接就可以用了。它就可以生效了,所以是不用去记,不用去算某个色值是多少。
·然后像其他的后面要介绍这种rgb、hsl这几种,就是这里也能够让我们去很好的去知道具体的颜色的色值的设置。但是复制起来我觉得最方便的还是HEX,也就是16进制的,所以这个东西一般来说就是直接复制过来用。
·然后来看下RG.B,RG.B就很好理解了,RGB就是red、green还有就是blue,就是也是三原色,就这样一个设置,注意它的写法是这样的,RGB然后一个原跨号,然后里面是三个颜色的色值,然后中间用这种逗号来分隔一下,然后这个都是每一个颜色的色值都是0到255,0到255,0是最小,25是最大。
·如果说像这个,车里就是红色强度已经是最强了,是这样的一个意思,它这个数值越小,颜色强度就越弱。比如说可以把这个颜色给它复制过来看一下,它就是这样的一个颜色,比如说可以调一下,比如说125就变成这样的一个颜色了。
·那它也有一个RGBA,其实就是后面再加一位这种0到1的值,比如说0.2,0.2就是它的一个不透明度了,不透明度,比如说给它这里去设置一个0.2,那它就有这个不透明度透明的效果了。
·这个是RGB和RG.BA,这个也很好理解,注意它每一位都是0到255这样的一个设置方式,每一位的这个数值。
·如果是这个纯白纯黑,其实这里255、255、255,在255、255、255,三个255其实就是一个纯白,跟这个ff是一样的,然后纯黑是这样,零零零三个0。
·那这个其他的红色、这个就更好理解。红色就是255,其他都是0。绿色就是第二个255,其他都是0。蓝色255,其他都是0。
·来看一下另外一个叫HSL和H.S.LA。这个a大家一看就知道什么意思了,a还是阿尔法的意思,也就是它的不透明的值。
·HSL是什么意思?a是一种颜色模式。它其实英文的全称应该是Hue Saturation,还有lightnes.s,也就是色相、饱和度、亮度三个这样的方面来设置颜色的值。它的写法大概是这个样子,给大家看一下,这个我也很少用,是这样的写法。
·它这里其实就是HSL,三个部分分别对应H.SL。H其实是色轮的概念,它就是有个360度,所以H的范围是0到360。另外的两个S就是0到100%,L也是一样的0%到10.0%。如果是HSLA,它其实也是0到1,比如0.2,是这样一个模式。
所以它这个写法其实跟RGB的基本的格式是一样的,都是它的颜色模式的名字,圆括号,里面再是每一个对应的设置内容的值。这是这三种颜色的色值的设置模式。
·自己最常用的就是16进制的,还有比较常用的,还有就是RGB和RGBA。
通常,我们为div盒子或者图片设置阴影使用 box-shadow 属性,代码如下:
box-shadow: 10px 10px 10px gray;
使用 box-shadow 属性 给div盒子设置阴影倒还好,如果用在透明的图片上,阴影会变成方形的,让其看起来像添加了一个边框一样。
我们可以通过css的另一种参数,为透明png实现基于透明图片的阴影效果,效果如下图,左侧是 box-shadow ,右侧 drop-shadow 。
drop-shadow()说明:
drop-shadow() 是CSS中用于为图像或文本添加阴影效果的一个函数,它属于 filter 属性的一部分。这个函数允许你为元素创建阴影,而不需要考虑元素的形状或边界框。与 box-shadow 不同,drop-shadow 可以应用于非矩形形状,如透明的PNG或SVG图像,它使用元素的Alpha蒙版来决定阴影的形状。这意味着,即使元素没有背景,drop-shadow 也能为图像的非透明部分创建阴影。
drop-shadow()语法如下:
filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )
drop-shadow()参数说明如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img_box .left_img{
box-shadow: 10px 10px 10px gray;
}
.img_box .right_img{
filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
}
</style>
</head>
<body>
<div class="img_box">
<img class="left_img" src="./lihua.png" />
<img class="right_img" src="./lihua.png" />
</div>
</body>
</html>
尽管有很好的支持,但 drop-shadow 滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的 情况,也许你可以在你的下一个项目中使用它!
背景色写法:background-color:颜色;
background-color:颜色;
为窗口设置背景色:
body {
background-color: chartreuse;
}
效果:
*请认真填写需求信息,我们会在24小时内与您取得联系。