CSS3基础样式

最新推荐文章于 2021-07-05 20:23:32 发布

即将入土的羸弱老年人

最新推荐文章于 2021-07-05 20:23:32 发布

阅读量419

点赞数

分类专栏： CSS Note Web 文章标签： CSS CSS3 CSS3基础样式

本文链接：https://blog.csdn.net/qq_36823300/article/details/100161615

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

1、浏览器内核介绍

浏览器内核主要分成两部分：渲染引擎和JavaScript引擎。

1）渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不同。

2）JavaScript引擎负责解析和执行JavaScript来实现网页的动态效果。

根据浏览器内核的不同，浏览器前缀的设置也有不同，常见的浏览器前缀如下所示。

常见的浏览器前缀
浏览器内核分类	常见浏览器	备注	前缀
Trident（IE内核）	IE浏览器、360安全浏览器、猎豹安全浏览器、傲游浏览器、百度浏览器、世界之窗浏览器、2345浏览器、搜狗高速浏览器等	其中部分浏览器的新版本是“双核”，甚至是“多核”，其中一个内核是Trident，然后增加一个其他内核	-ms-
Gecko（Firefox内核）	Netscape6及以上版本，Mozilla Firefox、Mozilla SeaMonkey等	Gecko的特点是代码完全公开	-moz-
Presto（Opera前内核）（已废弃）	Opera12.17及更早版本曾经采用的内核	Presto内核现已停止开发并废弃。Opera现已改用Google Chrome的Blink内核	-o-
Webkit（Safari内核，Chrome内核原型，开源）	Chrome、Apple Safari（Windows/Mac/iPhone/iPad）、Android默认浏览器等	Blink内核是一个由Google和Opera Software开发的浏览器排版引擎，作为Webkit的分支	-webkit-

2、CSS3选择器

1）属性选择器

属性选择器是通过属性来选择元素的一种方式，在下述代码中type和value都是input元素的属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        input[value] {
            background: red;
            color: white;
        }
    </style>
</head>

<body>

    <input type="text">
    <input type="text" value="HTML">
    <input type="text">

    <script>
    </script>

</body>

</html>

属性选择器的写法是通过中括号的方式进行选择的，也可以在中括号内把属性和属性值写完整。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        input[value=HTML] {
            background: red;
            color: white;
        }
    </style>
</head>

<body>

    <input type="text" value="HTML">
    <input type="text" value="HTML">
    <input type="text">

    <script>
    </script>

</body>

</html>

除了具体的属性选择器外，CSS3还提供了三种模糊匹配的属性选择器，下面将分别讲解三种模糊匹配的属性选择器。

（1）[attr^=value]匹配的是起始位置包含value值形式的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        input[value^=HTML] {
            background: red;
            color: white;
        }
    </style>
</head>

<body>

    <input type="text" value="HTML Language">
    <input type="text" value="HELLO HTML">
    <input type="text" value="CSS HTML JS">

    <script>
    </script>

</body>

</html>

（2）[attr$=value]匹配的是结束位置包含value值形式的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        input[value$=HTML] {
            background: red;
            color: white;
        }
    </style>
</head>

<body>

    <input type="text" value="HTML Language">
    <input type="text" value="HELLO HTML">
    <input type="text" value="CSS HTML JS">

    <script>
    </script>

</body>

</html>

（3）[attr*=value]匹配的是任意位置包含value值形式的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        input[value*=HTML] {
            background: red;
            color: white;
        }
    </style>
</head>

<body>

    <input type="text" value="HTML Language">
    <input type="text" value="HELLO HTML">
    <input type="text" value="CSS HTML JS">

    <script>
    </script>

</body>

</html>

2）结构伪类选择器

结构伪类选择器是针对HTML层次“结构”的伪类选择器。如想要某一个父元素下面的第n个子元素，则可以通过以下几种结构伪类选择器实现。

（1）第一类结构伪类选择器*-child方式。

*-child伪类选择器分类
选择器	含义
E:first-child选择器	选择父元素的第一个子元素
E:last-child选择器	选择父元素的最后一个子元素
E:nth-child(n)选择器	选择父元素下的第n个子元素
E:only-child选择器	选择父元素中唯一的子元素（该父元素只有一个子元素时才可以选择）

E:nth-child(n)选择器，可以设置一组元素中指定子项的样式，其参数可以设置为数字行，也可以设置为odd奇数行和even偶数行，另外还可以将参数设置为n值（从零累加的值）。注意，E:nth-child(n)选择器的参数是从1开始，而不是0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        li:nth-child(3n) {
            background: red;
        }
    </style>
</head>

<body>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <script>
    </script>

</body>

</html>

（2）第二类结构伪类选择器*-of-type方式。

*-of-type伪类选择器分类
选择器	含义
E:first-of-type选择器	选择同元素类型的第一个同级兄弟元素
E:last-of-type选择器	选择同元素类型的最后一个同级兄弟元素
E:nth-of-type(n)选择器	选择同元素类型的第n个同级兄弟元素
E:only-of-type选择器	选择同元素类型中唯一的同级兄弟元素

E:first-of-type、E:last-of-type、E:nth-of-type(n)、E:only-of-type与第一类*-child效果相同。*-of-type选择器与*-child选择器不同的是*-of-type表示选择同元素类型同级兄弟元素，而*-child表示选择父元素的子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        p:nth-of-type(3) {
            background: red;
        }
        p:nth-child(3) {
            background: blue;
        }
    </style>
</head>

<body>

    <p>HTML</p>
    <div>CSS</div>
    <p>JavaScript</p>
    <p>PHP</p>

    <script>
    </script>

</body>

</html>

可以看到会选择同级中同元素类型的第三个<p>标签。而*-child是父元素中的第三个元素，因此要选择到<p>JavaScript</p>标签。*-child选择器是选择父元素下的子元素（不区分元素类型），而*-of-type选择器是选择父元素下某个同元素类型的子元素（区分元素类型）。

3）状态伪类选择器

状态伪类选择器是一种针对HTML当前操作状态而进行选择的选择器，如标签是否获取焦点、标签是否被选中等。

*-child伪类选择器分类
选择器	含义	用途
:focus选择器	用于指定“表单元素”获得光标焦点时使用的样式	主要在单行文本框text、多行文本框textarea等表单元素获取焦点并输入文本时使用
:checked选择器	用于指定“表单元素”被选中时使用的样式	主要在单选按钮radio和复选框checkbox中使用
::selection选择器	用于改变被选择的网页文本的显示效果	主要在段落标签中使用
:first-letter选择器	用于对一段文本的第一个字符进行样式设置	主要在段落标签中使用
:first-line选择器	用于对一段文本的第一段字符进行样式设置	主要在段落标签中使用
:enabled选择器	用于设置“表单元素”中可用元素的样式	主要在单行文本框text、多行文本框textarea等表单元素中使用
:disabled选择器	用于对“表单元素”中不可用元素进行样式设置	主要在单行文本框text、多行文本框textarea等表单元素中使用
:read-write选择器	用于对“表单元素”中可读写的元素进行添加样式设置	主要在单行文本框text、多行文本框textarea等表单元素中使用
:read-only选择器	用于对“表单元素”中只读的元素进行添加样式设置	主要在单行文本框text、多行文本框textarea等表单元素中使用

4）其他选择器

CSS选择器除属性选择器、结构伪类选择器、状态伪类选择器外，还提供其他三个的选择器。

三个其他选择器
选择器	含义
~选择器	选择元素后的所有兄弟元素
+选择器	选择元素后最近的兄弟元素
>选择器	只选择子元素，对于深层嵌套的子元素不会选择

~选择器、+选择器、>选择器示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div ~p {
            background: red;
        }
        span +p {
            background: blue;
        }
        #box > li {
            border: 1px red solid;
        }
    </style>
</head>

<body>

    <span>PHP</span>
    <p>HTML</p>
    <div>CSS</div>
    <p>HTML</p>
    <p>HTML</p>
    <ul id="box">
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>

    <script>
    </script>

</body>

</html>

3、CSS3文本属性

CSS3增加了丰富的文本修饰效果，使网页看起来更加美观舒服。

1）text-shadow属性

text-shadow属性可设置的样式值有x-offset、y-offset、blur、color这四个值，其值含义及用法如下所示。

text-shadow属性取值及用法
属性值	含义	单位	用法
x-offset	阴影的水平偏移距离	px、em或百分比等	值为正，阴影向右偏移值为负，阴影向左偏移
y-offset	阴影的垂直偏移距离	px、em或百分比等	值为正，阴影向下偏移值为负，阴影向上偏移
blur	阴影的模糊程度	px、em或百分比等	值不能为负，值为0，无阴影模糊效果值越大，阴影越模糊值越小，阴影越清晰
color	阴影的颜色	三种颜色表示方法

text-shadow属性同时还支持多阴影的设置。通过多阴影设置可以设计出很多炫酷的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3火焰字效果</title>
    <style>
        div {
            font-size: 30px;
            margin: 20px;
            text-shadow: 0 0 4px white,
                        0 -5px 4px #ff3,
                        2px -10px 6px #fd3,
                        -2px -15px 11px #f80,
                        2px -25px 18px #f20;
        }
    </style>
</head>

<body>

    <div>Hello CSS3</div>

    <script>
    </script>

</body>

</html>

2）text-stroke属性

text-stroke属性用于设置文字的描边，可设置的样式值有w和color这两个值。w表示描边的宽度，color表示描边的颜色。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div {
            font-size: 50px;
            -webkit-text-stroke: 1px red;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: transparent;
        }
    </style>
</head>

<body>

    <div>Hello CSS3</div>

    <script>
    </script>

</body>

</html>

3）direction属性

属性用于设置文字的排列方向，可设置的样式值有rtl和ltr两个值。rtl表示文字从右向左排列，ltr表示文字从左向右排列。需要配合表示排版方式的CSS语法unicode-bidi:bidi-override属性和属性值实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div {
            font-size: 30px;
            margin: 20px;
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>

<body>

    <div>Hello CSS3</div>

    <script>
    </script>

</body>

</html>

4）@font-face属性

@font-face属性表示字体图标，主要实现网页中图标的展示效果。字体图标可以提高网页的性能以及方便地控制图标大小和颜色变化。

@font-face属性主要可设置font-family和src两个值。font-family属性用来设置字体名称，src属性用来设置字体文件路径。

4、CSS3背景属性

1）background-size属性

background-size属性用于设置背景图片大小。

background-size取值及设置背景图片方式
属性取值	设置背景图片方式
number	可分别设置背景图片的宽高的大小
cover（覆盖方式）	将背景图片以等比缩放来填充整个容器元素
contain（包含方式）	将背景图片等比例缩放至某一边紧贴容器边缘为止

2）background-origin属性

background-origin属性用于设置元素背景图片平铺的最开始位置。

background-origin取值及平铺方式
属性取值	平铺方式
padding-box（默认值）	背景图片从内边距开始平铺
border-box	背景图片从边框开始平铺
content-box	背景图片从内容区域开始平铺

3）background-clip属性

background-clip属性用于设置元素背景图片平铺后剪切的位置。

background-clip取值及剪切方式
属性取值	剪切方式
border-box（默认值）	平铺的背景图片从边框开始剪切
padding-box	平铺的背景图片从内边距开始剪切
content-box	平铺的背景图片从内容区域开始剪切

5、CSS3颜色属性

1）linear-gradient属性

linear-gradient属性表示线性渐变，是指在一条直线上进行渐变。linear-gradient属性需要通过background-image属性进行设置，可设置渐变方向、起始颜色、结束颜色这三个值。其具体设置方式如下：

起始颜色会渐变到结束颜色，也可以通过设置多个颜色值进行线性渐变。
渐变方向在第一个参数设置。可选择to left、to right、to top、to bottom等值。也可以设置方向的一个组合使用，如to left top方向值。渐变方向还可以设置一个旋转的角度。正值为顺时针旋转，负值为逆时针旋转。
线性渐变的颜色位置，可通过百分比划分渐变的区域大小。

2）radial-gradient属性

radial-gradient属性表示径向渐变，是一种颜色从起点到终点由内至外进行圆形渐变（从中间向外拉，像圆一样），其基本用法与线性渐变类似。起始颜色会渐变到结束颜色，也可以设置多个颜色值进行径向渐变，但径向渐变的方向设置尚不完善，需要添加浏览器前缀才可以实现，并且不支持to的方式，只支持方向的设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        #div1 {
            width: 200px;
            height: 150px;
            background-image: radial-gradient(red, yellow, blue);
        }
        #div2 {
            width: 200px;
            height: 150px;
            background-image: -webkit-radial-gradient(left, red, yellow, blue);
        }
    </style>
</head>

<body>

    <div id="div1"></div><br>
    <div id="div2"></div>

    <script>
    </script>

</body>

</html>

6、CSS3边框属性

1）border-radius属性

border-radius属性为元素添加圆角效果。长度值可以是px、百分比、em等。当设置的值越大时，圆角就越明显。border-radius属性中的数值代表这一个圆形的半径，这个圆形与元素相切就形成了圆角的大小。

border-radius属性与margin、padding属性类似，可通过一个值设置四个方法，也支持两个值和四个值的写法，还可以使用下面的属性定义指定的圆角。

border-top-right-radius：定义右上角的圆角半径。
border-bottom-right-radius：定义右下角的圆角半径。
border-bottom-left-radius：定义左下角的圆角半径。
border-top-left-radius：定义左上角的圆角半径。

2）border-image属性

border-image属性用于为边框添加背景图片，主要可以设置图片路径、切割图片的宽度、图片平铺方式这三个值。

通过url值来添加图片地址。通过数值来设置填充图片的大小，数值填充的是边框的四个方向，从图片边缘向图片内层截取相应数值进行填充。

默认边框中间部分被拉伸，可通过图片平铺来改变边框添加的方式，repeat值表示重复；round值表示平铺；stretch值表示拉伸（默认值）。

3）box-shadow属性

box-shadow属性是给一个容器添加阴影的样式属性。可选择设置x-shadow、y-shadow、blur、spread、color、inset等值。x-shadow、y-shadow值为阴影的偏移量，blur值为模糊值，color值为阴影的颜色。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 5px black solid;
            box-shadow: 10px 10px 5px red;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
    </script>

</body>

</html>

spread值为阴影的范围，可以对设置好的阴影进行局部放大。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 5px black solid;
            box-shadow: 10px 10px 5px 10px red;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
    </script>

</body>

</html>

inset值可用于设置内阴影。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 5px black solid;
            box-shadow: 10px 10px 5px 10px red inset;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
    </script>

</body>

</html>

4）多彩的边框颜色

在传统CSS中，只能设置简单的边框颜色。而在CSS3中可以使用多个颜色值设置边框颜色，从而实现过渡颜色的效果。在CSS3中，设置边框颜色的属性如下所示。

border-bottom-colors：定义下边框的颜色。
border-top-colors：定义上边框的颜色。
border-left-colors：定义左边框的颜色。
border-right-colors：定义右边框的颜色。

使用这些属性的语法如下所示。

border-bottom-colors: 颜色值1 颜色值2 …… 颜色值n
border-top-colors: 颜色值1 颜色值2 …… 颜色值n
border-left-colors: 颜色值1 颜色值2 …… 颜色值n
border-right-colors: 颜色值1 颜色值2 …… 颜色值n

每个颜色值代表边框中的一行（列）像素的颜色。

例如，如果边框的宽度为10px，则颜色值1指定第1行（列）像素的颜色；颜色值2指定第2行（列）像素的颜色；以此类推。如果指定的颜色值小于10，则其余边框行（列）像素的颜色使用颜色值n。

但是该属性并不是标准属性，不建议使用。

CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用。

**CSS的轮廓属性**
属性	说明
outline	在一个声明中设置所有的轮廓属性，轮廓属性的顺序为颜色、样式和宽度。（outline: red dotted thick;）
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

**轮廓样式的可选值**
可选值	说明
none	表示无轮廓，默认值
dotted	点状的轮廓
dashed	虚线轮廓
solid	实线轮廓
double	双线轮廓。双线的宽度等同于outline-width属性的值。
groove	3D凹槽轮廓。此效果取决于outline-color属性的值。
ridge	3D凸槽轮廓。此效果取决于outline-color属性的值。
inset	3D凹边轮廓。此效果取决于outline-color属性的值。
outset	3D凸边轮廓。此效果取决于outline-color属性的值。
inherit	规定从父元素继承轮廓样式的设置

**轮廓宽度的可选值**
可选值	说明
thin	细轮廓
medium	中等的轮廓，默认值
thick	粗的轮廓
length	规定轮廓粗细的数值
inherit	规定从父元素继承轮廓宽度的设置

CSS多列

在很多报纸中，将文章以多列的形式表现。在CSS3中，可以使用 column-count 属性设置文章显示的列数，语法如下。

column-count: auto | 整数

如果取值为auto，则由浏览器自动计算列数。

不同浏览器引擎实现column-count 属性的方法略有不同。在webkit引擎中为 -webkit-column-count ，在Gecko引擎中为 -moz-column-count 。出于兼容性的考虑，建议同时使用 -webkit-column-count 和 -moz-column-count 属性设置列数。

嵌入字体

为了使页面更美观、更独特，网页设计人员经常需要在网页中使用特殊的字体。但是如果客户端没有安装这个字体，就无法达到预期的效果，因此很多时候只能使用图片代替文字。但是，图片文件会增加网页的大小，影响浏览的速度。

在CSS3中，可以使用@font-face属性使用嵌入字体，语法如下。

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]];
    [font-weight: <weight>];
    [font-style: <style>];
}

参数说明如下。

YourWebFontName：自定义的字体名，在网页元素的font-family中引用定义的嵌入字体。
source：指定自定义字体文件的存放路径。
format：指定自定义字体的格式，用来帮助浏览器识别，可以是truetype、opentype、truetype-aat、embedded-opentype和avg等类型。
weight：定义字体是否为粗体。
style：定义字体样式，如斜体。

在CSS3中实现嵌入字体，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        @font-face {
            font-family: 'Andriko';
            src: url('Andriko.ttf');
            font-weight: normal;
            font-style: normal;
        }
        h1 {
            font-family: 'Andriko';
        }
    </style>
</head>

<body>

    <h1>font-family: 'Andriko'</h1>

    <script>
    </script>

</body>

</html>

HSL和HSLA颜色表示方法

CSS3支持以HSL声明的形式表现颜色。HSL色彩模式是工业界的一种颜色标准，是通过对色调（H）、饱和度（S）、亮度（L）3个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSL声明的定义形式如下。

hsl(色调值，饱和度值，亮度值)

参数说明如下。

色调值：用于定义色盘，0和360是红色，接近120的是绿色，240是蓝色。
饱和度值：百分比，0%是灰度，100%饱和度最高。
亮度值：单位为百分比，0%最暗，50%均值，100%最亮。

HSLA声明在HSL颜色的基础上增加了一个A参数，设置该颜色的透明度。与RGBA一样，A参数的取值范围也为0~1，0表示完全透明（即不可见），1表示完全不透明。

使用HSL声明实现不同颜色的层，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        .hslL1 {
            background: hsl(120, 100%, 50%);
            height: 20px;
        }
        .hslL2 {
            background: hsl(120, 50%, 50%);
            height: 20px;
        }
        .hslL3 {
            background: hsl(120, 100%, 75%);
            height: 20px;
        }
        .hslL4 {
            background: hsl(240, 100%, 50%);
            height: 20px;
        }
        .hslL5 {
            background: hsl(240, 50%, 50%);
            height: 20px;
        }
        .hslL6 {
            background: hsl(240, 100%, 75%);
            height: 20px;
        }
    </style>
</head>

<body>

    <div class="hslL1"></div>
    <div class="hslL2"></div>
    <div class="hslL3"></div>
    <div class="hslL4"></div>
    <div class="hslL5"></div>
    <div class="hslL6"></div>

    <script>
    </script>

</body>

</html>

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础样式

1、浏览器内核介绍浏览器内核主要分成两部分：渲染引擎和JavaScript引擎。1）渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不同。2）JavaScript引...
复制链接

扫一扫

专栏目录