欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3属性详解(图文教程)

程序员文章站 2022-08-28 18:38:34
本文最初发表于 "博客园" ,并在 "GitHub" 上持续更新 前端的系列文章 。欢迎在GitHub上关注我,一起入门和进阶前端。 以下是正文。 前言 我们在上一篇文章中学习了 "CSS3的选择器" ,本文来学一下CSS3的一些属性。 本文主要内容: 颜色 文本 盒模型中的 box sizing ......

本文最初发表于博客园,并在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 的值该设置多少,我们不妨来看一下色盘

CSS3属性详解(图文教程)

推荐链接:配色宝典

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

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

(2)background: transparent; 可以单独设置透明度,但设置的是完全透明(不可调节透明度)。

文本

text-shadow:设置文本的阴影

格式举例:

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

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

效果举例:

CSS3属性详解(图文教程)

举例:凹凸文字效果

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>

效果如下:

CSS3属性详解(图文教程)

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

盒模型中的 box-sizing 属性

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

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

这就需要用到 box-sizing属性。它的属性值可以是:content-boxborder-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);

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

如果直接这样写属性,是看不到效果的:

CSS3属性详解(图文教程)

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

格式如下:

    -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);

效果如下:

CSS3属性详解(图文教程)

边框

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

边框圆角: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: 100px;
        }

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

        .box:nth-child(3) {
            border-radius: 200px 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>

效果如下:

CSS3属性详解(图文教程)

边框阴影:box-shadow 属性

格式举例:

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

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

参数解释:

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

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

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

效果如下:

CSS3属性详解(图文教程)

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

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

效果如下:

20180207_2028.png
CSS3属性详解(图文教程)

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

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

边框图片

边框图片有以下属性:

    /* 边框图片的路径*/
    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属性详解(图文教程)

CSS3属性详解(图文教程)

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

CSS3属性详解(图文教程)

再具体一点:

CSS3属性详解(图文教程)

背景属性

背景属性在 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;

这里我们对属性值 covercontain进行再次强调:

  • 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,那边框部分也会显示图片哦。

如下图所示:

CSS3属性详解(图文教程)

背景裁剪: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属性详解(图文教程)

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

渐变

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

渐变分为:

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

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

  • 重复渐变。

见下图:

CSS3属性详解(图文教程)

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

线性渐变

格式:

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

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

参数解释:

  • 方向可以是:to leftto rightto topto 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>

效果如下:

CSS3属性详解(图文教程)

举例:按钮

<!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>

效果:

CSS3属性详解(图文教程)

径向渐变

格式:

    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>

效果如下:

CSS3属性详解(图文教程)

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

<!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>

效果如下:

CSS3属性详解(图文教程)

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

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

我的公众号

想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

CSS3属性详解(图文教程)