登录
目录
当前位置： 首页 > 文档资料 > 前端入门进阶 >

7.4 CSS3属性详解（一）

优质
小牛编辑
142浏览
2023-12-01

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。

本文主要内容：

  • 颜色

  • 文本

  • 盒模型中的 box-sizing 属性

  • 处理兼容性问题：私有前缀

  • 边框

  • 背景属性

  • 渐变

颜色

CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。

RGBA、HSLA可应用于所有使用颜色的地方。

RGBA 举例：

    background-color: rgba(0, 0, 255, 0.3);

    border: 30px solid rgba(0, 255, 0, 0.3);

解释：

  • RGBA 即：Red、Green、Blue、Alpha

  • R、G、B 的取值范围是：0~255

HSLA 举例：

    background-color: hsla(240,50%,50%,0.4);

解释：

  • H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。

  • S 饱和度，取值范围 0%~100%。值越大，越鲜艳。

  • L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。

  • A 透明度，取值范围 0~1。

如果不知道 H 的值该设置多少，我们不妨来看一下色盘：

推荐链接：配色宝典

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

文本

text-shadow：设置文本的阴影

格式举例：

    text-shadow: 20px 27px 22px pink;

参数解释：水平位移 垂直位移 模糊程度 阴影颜色。

效果举例：

举例：凹凸文字效果

text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #666;
        }

        div {
            font-size: 100px;
            text-align: center;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            color: #666;
        }

        /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
        .tu {
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }

        .ao {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
<body>
<div class="ao">生命壹号</div>
<div class="tu">生命壹号</div>
</body>
</html>

效果如下：

上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。

盒模型中的 box-sizing 属性

我们在之前的文章中专门讲过盒子模型。

CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

这就需要用到 box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。

外加模式：（css的默认方式）

    box-sizing: content-box;

解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。

内减模式：【需要注意】

    box-sizing: border-box;

解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

处理兼容性问题：私有前缀

通过网址http://caniuse.com/ 可以查询CSS3各特性的支持程度。

处理兼容性问题的常见方法：为属性添加私有前缀。

如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。

私有前缀的举例：

比如说，我想给指定的div设置下面这样一个属性：

    background: linear-gradient(left, green, yellow);

上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。

如果直接这样写属性，是看不到效果的：

此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。

格式如下：

    -webkit-: 谷歌 苹果
    -moz-:火狐
    -ms-：IE
    -o-：欧朋

格式举例如下：

    background: -webkit-linear-gradient(left, green, yellow);
    background: -moz-linear-gradient(left, green, yellow);
    background: -ms-linear-gradient(left, green, yellow);
    background: -o-linear-gradient(left, green, yellow);
    background: linear-gradient(left, green, yellow);

效果如下：

边框

边框的属性很多，其中边框圆角和边框阴影这两个属性，应用十分广泛，兼容性也相对较好，且符合渐进增强的原则，需要重点熟悉。

边框圆角：border-radius 属性

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。

单个属性的写法：

    border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径

    border-top-right-radius: 60px 120px;

    border-bottom-left-radius: 60px 120px;

    border-bottom-right-radius: 60px 120px;

复合写法：

    border-radius: 60px/120px;             //参数：水平半径/垂直半径

    border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值

    border-radius: 20px 60px;

最简洁的写法：（四个角的半径都相同时）

    border-radius: 60px;

举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        .parent {
            width: 400px;
        }
        .box {
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid rgb(144, 12, 63);
            margin: 20px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 50px;
            background-color: rgb(255, 141, 26);

        }

        /*画圆形的方式一*/
        .box:nth-child(1) {
            border-radius: 50px;
        }

        /*画圆形的方式二*/
        .box:nth-child(2) {
            border-radius: 50%;
        }

        .box:nth-child(3) {
            border-radius: 100px 0 0 0;
        }

        .box:nth-child(4) {
            border-radius: 100px/50px;
        }

        .box:nth-child(5) {
            border-radius: 10%;
        }

        .box:nth-child(6) {
            border-radius: 0 100px;
        }

    </style>
</head>
<body>

<div class="parent">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>
</body>
</html>

效果如下：

边框阴影：box-shadow 属性

格式举例：

    box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色

    box-shadow: 15px 21px 48px -2px #666;

参数解释：

  • 水平偏移：正值向右 负值向左。

  • 垂直偏移：正值向下 负值向上。

  • 模糊程度：不能为负值。

效果如下：

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

    box-shadow:3px 3px 3px 3px #666 inset;

效果如下：

20180207_2028.png

注意：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

我们还可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

边框图片有以下属性：

    /* 边框图片的路径*/
    border-image-source: url("images/border.png");

    /* 图片边框的裁剪*/
    border-image-slice: 27;

    /*图片边框的宽度*/
    border-image-width: 27px;

    /*边框图片的平铺*/
    /* repeat :正常平铺 但是可能会显示不完整*/
    /*round: 平铺 但是保证 图片完整*/
    /*stretch: 拉伸显示*/
    border-image-repeat: stretch;

我们也可以写成一个综合属性：

     border-image: url("images/border.png") 27/20px round;

这个属性要好好理解，我们假设拿下面这张图来作为边框图片：

这张图片将会被“切割”成九宫格形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：

再具体一点：

常见的边框图片汇总

背景属性

背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

背景尺寸：background-size属性

background-size属性：设置背景图片的尺寸。

格式举例：

    /* 宽、高的具体数值 */
    background-size: 500px 500px;

    /* 宽高的百分比 */
    background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;

    background-size: 100% auto;  //这个属性可以自己试验一下。

    /* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
    background-size: cover;

    /* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。  */
    background-size: contain;

这里我们对属性值 cover 和 contain进行再次强调：

  • cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。

  • contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。也就是说，保证背景图片最大化地在盒子里，等比例显示，但不保证能铺满盒子。

背景原点：background-origin 属性

background-origin 属性：控制背景从什么地方开始显示。

格式举例：


    /* 从 padding-box 内边距开始显示背景图 */
    background-origin: padding-box;           //默认值

    /* 从 border-box 边框开始显示背景图  */
    background-origin: border-box;

    /* 从 content-box 内容区域开始显示背景图  */
    background-origin: content-box;

如果属性值设置成了border-box，那边框部分也会显示图片哦。

如下图所示：

背景裁剪：background-clip属性

格式举例：

background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：

  • border-box 超出 border-box 的部分，将裁剪掉

  • padding-box 超出 padding-box 的部分，将裁剪掉

  • content-box 超出 content-box 的部分，将裁剪掉

假设现在有这样的属性设置：

    background-origin: border-box;

    background-clip: content-box;

上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。

同时设置多个背景

我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            height: 416px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
            background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

实现效果如下：

上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。

渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

渐变分为：

  • 线性渐变：沿着某条直线朝一个方向产生渐变效果。

  • 径向渐变：从一个中心点开始沿着四周产生渐变效果。

  • 重复渐变。

见下图：

注意，渐变属于背景图片属性background-image的属性值。我们依次来看一下。

线性渐变

格式：


    background-image: linear-gradient(方向, 起始颜色, 终止颜色);

    background-image: linear-gradient(to right, yellow, green);

参数解释：

  • 方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。

格式举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #000;
        }

        /* 语法：
            linear-gradient(方向，起始颜色，终止颜色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始颜色
            终止颜色
        */
        div:nth-child(1) {
            background-image: linear-gradient(to right, yellow, green);
        }

        /* 不写方向，表示默认的方向是：从上往下 */
        div:nth-child(2) {
            background-image: linear-gradient(yellow, green);
        }

        /* 方向可以指定角度 */
        div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(135deg, yellow, green);
        }

        /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
        div:nth-child(4) {
            background-image: linear-gradient(to right,
            yellow 0%,
            red 40%,
            green 70%,
            blue 100%);

        }

        /* 颜色之间，出现突变 */
        div:nth-child(5) {
            background-image: linear-gradient(45deg,
            yellow 0%,
            yellow 25%,
            blue 25%,
            blue 50%,
            red 50%,
            red 75%,
            green 75%,
            green 100%
            );
        }

        div:nth-child(6) {
            background-image: linear-gradient(to right,
            #000 0%,
            #000 25%,
            #fff 25%,
            #fff 50%,
            #000 50%,
            #000 75%,
            #fff 75%,
            #fff 100%
            );

        }

    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果如下：

举例：按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f8fcd4;
        }

        .nav {
            width: 800px;
            text-align: center;
            padding-top: 50px;
            margin: 0 auto;
        }

        /*设置按钮基本样式*/
        .nav a {
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            border: 1px solid #e59500;
            background-color: #FFB700;
            background-image: linear-gradient(
                    to bottom,
                    #FFB700 0%,
                    #FF8C00 100%
            );
        }

    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;">导航1</a>
    <a href="javascript:;">导航2</a>
    <a href="javascript:;">导航3</a>
    <a href="javascript:;">导航4</a>
    <a href="javascript:;">导航5</a>
    <a href="javascript:;">导航6</a>
</div>
</body>
</html>

效果：

径向渐变

格式：

    background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);

    background-image: radial-gradient(100px at center,yellow ,green);

解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。

中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。

当然，还有其他的各种参数。格式举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px;
            float: left;
        }

        /*
            径向渐变：
            radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
            中心点位置：at  left  right  center bottom  top
        */

        /*辐射半径为100px，中心点在中间*/
        div:nth-child(1) {
            background-image: radial-gradient(100px at center, yellow, green);
        }

        /*中心点在左上角*/
        div:nth-child(3) {
            background-image: radial-gradient(at left top, yellow, green);
        }

        div:nth-child(2) {
            background-image: radial-gradient(at 50px 50px, yellow, green);
        }

        /*设置不同的颜色渐变*/
        div:nth-child(4) {
            background-image: radial-gradient(100px at center,
            yellow 0%,
            green 30%,
            blue 60%,
            red 100%);
        }

        /*如果辐射半径的宽高不同，那就是椭圆*/
        div:nth-child(5) {
            background-image: radial-gradient(100px 50px at center, yellow, green);
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

效果如下：

举例：利用径向渐变和边框圆角的属性，生成按钮。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>

        div:nth-child(1) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
            background-image: radial-gradient(
                    200px at 100px 100px,
                    rgba(0, 0, 0, 0),
                    rgba(0, 0, 0, 0.5)
            );
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

效果如下：

上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。

CSS3的更多属性，且听下文继续。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn