CSS学习笔记(十一) CSS3新特性-阿里云开发者社区

CSS学习笔记(十一) CSS3新特性

2023-04-25 118

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS学习笔记(十一) CSS3新特性

前言

这篇文章我们将会介绍 CSS3 中一些常用的新特性

包括选择器、过渡、动画、弹性布局、颜色、阴影、反射、渐变、字体、转换等等

正文

1、颜色

在 CSS3 之前，表示颜色可以使用以下三种方法：

关键字表示法，例如黑色可以表示为 black，白色可以表示为 white
十六进制格式，例如黑色可以表示为 #000000，白色可以表示为 #FFFFFF
rgb()，例如黑色可以表示为 rgb(0,0,0)，白色可以表示为 rgb(255,255,255)

而在 CSS3 中，又新增三种方法，分别是：

hsl()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)

hue：数值，取值范围为 0 ~ 359，例如红色为 0，绿色为 120，蓝色为 240

saturate：百分比，100% 为实际色调，0% 为灰色

lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色

rgba()：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)
hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)

2、阴影

我们既可以为块级元素添加阴影，也可以为文字添加阴影

（1）块级元素阴影

我们可以使用 box-shadow 为块级元素添加阴影

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选，指定阴影的模糊程度
spread-radius：阴影半径，可选，指定阴影的区域大小
color：阴影颜色，可选，默认值是黑色
inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影

<!DOCTYPE html>
<html>
<head>
    <style>
        .moon {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: rgba(255, 244, 99, 0.8);
            box-shadow: 5px 5px 5px 10px rgba(255, 244, 99, 0.2);
        }
    </style>
</head>
<body>
    <div class="moon"></div>
</body>
</html>

（2）文字阴影

我们可以使用 text-shadow 属性为文字添加阴影

text-shadow: offset-x offset-y blur-radius color;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选
color：阴影颜色，可选，默认值是黑色

<!DOCTYPE html>
<html>
<head>
    <style>
        .shadow {
            font-size: xx-large;
            font-weight: bolder;
            color: black;
            background-color: white;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
    <div class="shadow">你好，世界</div>
</body>
</html>

3、渐变

渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

线性渐变：渐变效果向下、向右或向对角方向展开
径向渐变：渐变效果从中心开始向四周展开

（1）线性渐变

可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变方向，可选，下面列举几个常见的值：

to bottom：渐变方向从上到下展开，默认值

to right：渐变效果从左到右展开

to bottom right：渐变方向从左上到右下展开

<degree>：水平线和渐变线之间的角度，按逆时针方向计算

color-stop1, color-stop2, ...：指定渐变颜色，必需

<!DOCTYPE html>
<html>
<head>
    <style>
        .rainbow {
            width: 800px;
            height: 100px;
            background-color: white; /* linear-gradient 不生效时使用 */
            background-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>

（2）径向渐变

可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape：指定形状，可选，取值如下：

ellipse：椭圆，默认值

circle：圆形

size：表示渐变到哪停止，可选，取值如下：

farthest-corner：最远角，默认值

closest-corner：最近角

farthest-side：最远边

closest-side：最近边

position：表示中心点所在的位置，可选
它由两个百分数值决定，分别代表中心点在水平和垂直方向的位置，默认为 50% 50%

color-stop1, color-stop2, ...：指定渐变颜色，必需

<!DOCTYPE html>
<html>
<head>
    <style>
        .rainbow {
            width: 500px;
            height: 500px;
            background-color: white; /* radial-gradient 不生效时使用 */
            background-image: radial-gradient(circle farthest-corner at 0% 100%, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>

4、反射

通过 -webkit-box-reflect 属性我们可以实现镜面效果

-webkit-box-reflect：direction offset mask-box-image

direction：反射方向，取值如下：

above：倒影出现在原对象的上方
below：倒影出现在原对象的下方
left：倒影出现在原对象的左方
right：倒影出现在原对象的右方

offset：倒影与原对象之间的间距
mask：遮罩效果，图片或者渐变

<!doctype html>
<html>
<head>
    <style>
        .reflect {
            font-size: xx-large;
            font-weight: bolder;
            -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(255, 255, 255, 0.2));
        }
    </style>
</head>
<body>
    <div class="reflect">你好，世界</div>
</body>
</html>

5、字体

@font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：

@font-face
{
    /* font-family 属性指定字体名称 */
    font-family: myFont;
    /* src 属性指定资源位置 */
    src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}

然后就能在文件中直接使用，例子如下：

.use-my-font {
    font-family: myFont; /* 自定义的字体名称 */
}

6、转换

使用 transform 属性，我们可以使得元素变形，包括平移、旋转、缩放和倾斜

平移，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的移动距离

translate(x,y)、translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)

旋转，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的旋转矢量，angle 定义顺时针旋转角度

rotate(angle)、rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)

缩放，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的缩放倍数

scale(x,y)、scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z)

倾斜，参数 x-angle、y-angle 分别定义与 X 轴、Y 轴的倾斜夹角，该操作会导致形状发生变化

skew(x-angle,y-angle)、skewX(x-angle)、skewY(y-angle)

<!doctype html>
<html>
<head>
    <style>
        .frame {
            width: 900px;
            height: 900px;
            min-width: 900px;
            min-height: 900px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .photo {
            margin: 0;
            padding: 0;
            width: 300px;
            height: 300px;
            float: left;
            overflow: hidden;
        }
        .photo:hover {
            cursor: pointer;
            transition: transform 0.4s;
            transform: scale(1.2, 1.2);
        }
    </style>
</head>
<body>
    <div class="frame">
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
    </div>
</body>
</html>

CSS学习笔记(十一) CSS3新特性

前言

正文

1、颜色

2、阴影

3、渐变

4、反射

5、字体

6、转换

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS学习笔记(十一) CSS3新特性

前言

正文

1、颜色

2、阴影

3、渐变

4、反射

5、字体

6、转换

热门文章

最新文章

相关课程

相关电子书

相关实验场景