> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 > 以下是正文。 ## 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性。 ## 颜色 CSS3中,有一种新的表示颜色的方式:RGBA或者HSLA。 RGBA、HSLA可应用于**所有**使用颜色的地方。 **RGBA 举例**: ```javascript 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 举例**: ```javascript 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 的值该设置多少,我们不妨来看一下**色盘**: ![](http://img.smyhvae.com/20180207_1545.png) 推荐链接:[配色宝典](http://www.uisdc.com/how-to-create-color-palettes) **关于设置透明度的其他方式:** (1)`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说,当盒子设置半透明的时候,会影响里面的子盒子。 (2)`background: transparent;` 可以单独设置透明度,但设置的是完全透明(不可调节透明度)。 ## 文本 ### text-shadow:设置文本的阴影 格式举例: ```javascript text-shadow: 20px 27px 22px pink; ``` 参数解释:水平位移 垂直位移 模糊程度 阴影颜色。 效果举例: ![](http://img.smyhvae.com/20180207_1600.png) ### 举例:凹凸文字效果 text-shadow 可以设置多个阴影,每个阴影之间使用逗号隔开。我们来看个例子。 代码如下: ```html
生命壹号
生命壹号
``` 效果如下: ![](http://img.smyhvae.com/20180207_1617.png) 上图中,实现凹凸文字效果的方式比较简单,给左上角放白色的阴影,右下角放黑色的阴影,就达到了凹下去的效果。 ## 盒模型中的 box-sizing 属性 我们在**[之前的文章](http://www.cnblogs.com/smyhvae/p/7256371.html)**中专门讲过盒子模型。 CSS3 对盒模型做出了新的定义,即允许开发人员**指定盒子宽度和高度的计算方式**。 这就需要用到 `box-sizing`属性。它的属性值可以是:`content-box`、`border-box`。解释如下。 **外加模式:**(css的默认方式) ```javascript box-sizing: content-box; ``` 解释:此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小,也不会改变内容的宽高,而是盒子的总宽高发生变化。 **内减模式:**【需要注意】 ```javascript box-sizing: border-box; ``` 解释:此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小,会改变内容的宽高,盒子的总宽高不变。 ## 处理兼容性问题:私有前缀 通过网址 可以查询CSS3各特性的支持程度。 处理兼容性问题的常见方法:为属性添加**私有前缀**。 如此方法不能解决,应尽量避免使用,无需刻意去处理CSS3的兼容性问题。 **私有前缀的举例**: 比如说,我想给指定的div设置下面这样一个属性: ```css background: linear-gradient(left, green, yellow); ``` 上面这个属性的作用是:添加从左到右的线性渐变,颜色从绿色变为黄色。 如果直接这样写属性,是看不到效果的: ![](http://img.smyhvae.com/20180207_1700.png) 此时,我们可以**为浏览器添加不同的私有前缀**,属性就可以生效了。 格式如下: ```html -webkit-: 谷歌 苹果 -moz-:火狐 -ms-:IE -o-:欧朋 ``` 格式举例如下: ```css 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); ``` 效果如下: ![](http://img.smyhvae.com/20180207_1710.png) ## 边框 边框的属性很多,其中**边框圆角**和**边框阴影**这两个属性,应用十分广泛,兼容性也相对较好,且符合**渐进增强**的原则,需要重点熟悉。 ### 边框圆角:`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; ``` 举例: ```html
1
2
3
4
5
6
``` 效果如下: ![](http://img.smyhvae.com/20180207_1750.png) ### 边框阴影:`box-shadow` 属性 格式举例: ```javascript box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 box-shadow: 15px 21px 48px -2px #666; ``` 参数解释: - 水平偏移:正值向右 负值向左。 - 垂直偏移:正值向下 负值向上。 - 模糊程度:不能为负值。 效果如下: ![](http://img.smyhvae.com/20180207_2027.png) 另外,后面还可以再加一个inset属性,表示内阴影。如果不写,则默认表示外阴影。例如: ```javascript box-shadow:3px 3px 3px 3px #666 inset; ``` 效果如下: 20180207_2028.png ![](http://img.smyhvae.com/20180206_2150.png) **注意**:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。 我们还可以设置多重边框阴影,实现更好的效果,增强立体感。 ### 边框图片 边框图片有以下属性: ```javascript /* 边框图片的路径*/ border-image-source: url("images/border.png"); /* 图片边框的裁剪*/ border-image-slice: 27; /*图片边框的宽度*/ border-image-width: 27px; /*边框图片的平铺*/ /* repeat :正常平铺 但是可能会显示不完整*/ /*round: 平铺 但是保证 图片完整*/ /*stretch: 拉伸显示*/ border-image-repeat: stretch; ``` 我们也可以写成一个综合属性: ```javascript border-image: url("images/border.png") 27/20px round; ``` 这个属性要好好理解,我们假设拿下面这张图来作为边框图片: ![](http://img.smyhvae.com/20180207_2045.png) ![](http://img.smyhvae.com/20180207_2046.png) 这张图片将会被“切割”成**九宫格**形式,然后进行平铺。四个角位置、形状保持不变,中心位置和水平垂直向两个方向平铺: ![](http://img.smyhvae.com/20180207_2050.png) 再具体一点: ![](http://img.smyhvae.com/20180207_2051.png) ## 背景属性 背景属性在 CSS3 中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 ### 背景尺寸:`background-size`属性 `background-size`属性:设置背景图片的尺寸。 格式举例: ```javascript /* 宽、高的具体数值 */ 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` 属性:控制背景从什么地方开始显示。 格式举例: ```javascript /* 从 padding-box 内边距开始显示背景图 */ background-origin: padding-box; //默认值 /* 从 border-box 边框开始显示背景图 */ background-origin: border-box; /* 从 content-box 内容区域开始显示背景图 */ background-origin: content-box; ``` 如果属性值设置成了`border-box`,那边框部分也会显示图片哦。 如下图所示: ![](http://img.smyhvae.com/20180207_2115.png) ### 背景裁剪:`background-clip`属性 格式举例: `background-clip: content-box;` 超出的部分,将裁剪掉。属性值可以是: - `border-box` 超出 border-box 的部分,将裁剪掉 - `padding-box` 超出 padding-box 的部分,将裁剪掉 - `content-box` 超出 content-box 的部分,将裁剪掉 假设现在有这样的属性设置: ```javascript background-origin: border-box; background-clip: content-box; ``` 上方代码的意思是,背景图片从**边框部分**开始加载,但是呢,超出**内容区域**的部分将被裁减掉。 ### 同时设置多个背景 我们可以给一个盒子同时设置多个背景,用以逗号隔开即可。可用于自适应局。 代码举例: ```html
``` 实现效果如下: ![](http://img.smyhvae.com/20180207_2140.gif) 上方代码中,我们其实给盒子设置了五张小图,拼成的一张大图。当改变浏览器窗口大小时,可以自适应布局。 ## 渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。 渐变分为: - 线性渐变:沿着某条直线朝一个方向产生渐变效果。 - 径向渐变:从一个**中心点**开始沿着**四周**产生渐变效果。 - 重复渐变。 见下图: ![](http://img.smyhvae.com/20180208_1140.png) 注意,渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。 ### 线性渐变 格式: ```javascript background-image: linear-gradient(方向, 起始颜色, 终止颜色); background-image: linear-gradient(to right, yellow, green); ``` 参数解释: - 方向可以是:`to left`、`to right`、`to top`、`to bottom`、角度`30deg`(指的是顺时针方向30°)。 格式举例: ```html
``` 效果如下: ![](http://img.smyhvae.com/20180207_2222.png) **举例**:按钮 ```html CSS3 渐变 ``` 效果: ![](http://img.smyhvae.com/20180207_2301.png) ### 径向渐变 格式: ``` background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); background-image: radial-gradient(100px at center,yellow ,green); ``` 解释:围绕中心点做渐变,半径是150px,从黄色到绿色做渐变。 中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。 当然,还有其他的各种参数。格式举例: ```html
``` 效果如下: ![](http://img.smyhvae.com/20180207_2256.png) **举例:**利用径向渐变和边框圆角的属性,生成按钮。代码如下: ```html CSS3 渐变
``` 效果如下: ![](http://img.smyhvae.com/20180208_1133.png) 上图中,给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0,则样式无变化,和第一个div一样。如果设置的透明度是从1到1,则盒子是全黑的。 CSS3的更多属性,且听下文继续。 ## 我的公众号 想学习**代码之外的软技能**?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/2016040102.jpg)