CSS3属性详解(图文教程)

2018-02-08 19:07:28来源:cnblogs.com作者:生命壹号人点击

分享

本文最初发表于博客园,并在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-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);

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

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

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

格式如下:

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

效果如下:

边框阴影: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;

这里我们对属性值 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,那边框部分也会显示图片哦。

如下图所示:

背景裁剪: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 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>

效果如下:

举例:按钮

<!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的更多属性,且听下文继续。

我的公众号

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

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台