forked from theluyuan/Web
848 lines
20 KiB
Markdown
848 lines
20 KiB
Markdown
|
|
|||
|
|
|||
|
|
|||
|
> 本文最初发表于[博客园](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
|
|||
|
<!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>
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](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 的大小,会改变内容的宽高,盒子的总宽高不变。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
## 处理兼容性问题:私有前缀
|
|||
|
|
|||
|
通过网址<http://caniuse.com/> 可以查询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
|
|||
|
<!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>
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](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
|
|||
|
<!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>
|
|||
|
```
|
|||
|
|
|||
|
实现效果如下:
|
|||
|
|
|||
|
![](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
|
|||
|
<!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>
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20180207_2222.png)
|
|||
|
|
|||
|
**举例**:按钮
|
|||
|
|
|||
|
```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>
|
|||
|
```
|
|||
|
|
|||
|
效果:
|
|||
|
|
|||
|
![](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
|
|||
|
<!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>
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20180207_2256.png)
|
|||
|
|
|||
|
**举例:**利用径向渐变和边框圆角的属性,生成按钮。代码如下:
|
|||
|
|
|||
|
|
|||
|
```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>
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20180208_1133.png)
|
|||
|
|
|||
|
上图中,给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0,则样式无变化,和第一个div一样。如果设置的透明度是从1到1,则盒子是全黑的。
|
|||
|
|
|||
|
|
|||
|
CSS3的更多属性,且听下文继续。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
## 我的公众号
|
|||
|
|
|||
|
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。
|
|||
|
|
|||
|
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/2016040102.jpg)
|
|||
|
|