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 {
             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 {
             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 {
             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 {
             900px;
            height: 900px;
            min- 900px;
            min-height: 900px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .photo {
            margin: 0;
            padding: 0;
             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学习笔记

版权声明:本博客属于个人维护博客,未经博主允许不得转载其中文章。
原文地址:https://www.cnblogs.com/wsmrzx/p/12247177.html