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)
- alpha：数值，取值范围为 0 ~ 1，0 为完全透明，1 为完全不透明
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 系列文章，请看 CSS学习笔记】

posted @ 2020-01-31 23:05 半虹阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

半虹小站

愿你我都能成为闪闪发光的人。公众号「半虹小站」