CSS3 学习笔记

border-radius

圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了 CSS3 以后通过属性就 能够搞定，我们可以通过 border-radius 设置元素的圆角半径。

border-radius: 5px;

对于一个正方形，我们只需要设置为边长的一半就可以呈现一个圆。

div {
	 200px;
	height: 200px;
	border-radius: 50%; // 设置百分比
	border-radius: 100px; // 设置长度一半
}

代码

border-radius 是缩写的格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法

border-top-left-radius: length, length;
border-top-right-radius: length, length;
border-bottom-left-radius: length, length;
border-bottom-right-radius: length, length;

第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角

box-shadow

CSS3 原生支持了阴影效果

box-shadow:inset h-shadow v-shadow blur-radius spread-radius color

box-shadow 属性至多有6个参数设置：

1. 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影

2. h-shadow: 是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边

3. v-shadow: 是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部

4. 阴影模糊距离：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊

5. 阴影阴影的尺寸：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

6. 阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样

box-shadow 可以使用一个或多个投影，如果使用多个投影时必须需要用逗号,分开

box-shadow: 3px 3px 3px orange, 3px 3px 3px red;

box-sizing

这个属性多少和边框也相关，传统的盒模型width就是指内容区域宽度，和padding、border没有关系，但是这在布局上带来一定的困难

box-sizing 可以改变盒模型

1. content-box：标准盒模型
2. border-box：
   width = padding-left + padding-right + border-left-width + border-right-width + content width
   height = padding-top + padding-bottom + border-top-width + border-bottom-width + content height

div {
	 100px; // width 包含了左右padding的宽度 + 左右border的宽度
	height: 100px; // height 包含了上下padding的宽度 + 上下border的宽度
	padding: 20px;
	border: 1px solid #000;
	box-sizing: border-box;
}

代码

text-overflow

1. clip：隐藏超出文本
2. ellipsis：显示省略符号来代表被修剪的文本。

对于省略号效果还需要其它属性配合

p {
	 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

担心会有人提问上面的代码只能在第一行显示省略号，假如我想在第二行或者第三行显示怎么办呢？

代码

原理就是通过伪元素 ::after 来实现是不是非常的 easy。

过渡和动画

CSS3 的动画是浏览器原生支持的，好处就是流畅

transition（过渡）

在CSS3引入 transition 之前css没有时间轴，所有的状态变化都是瞬间完成。

transition 的作用在于，指定状态变化所需要的时间

div {
	 100px;
	height: 100px;
	border: 1px solid #000;
	background-color: #000;
	transition: all 1s;
}

div:hover {
	 200px;
	height: 200px;
}

代码

指定属性

我们还可以指定transition适用的属性

div {
	transition: 1.5s width;
}

完整代码

这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现。

在同一行transition语句中，可以分别指定多个属性

div {
	transition: 1.5s width, 1s height;
}

代码

delay

delay：中文翻译延迟，顾名思义就是延迟多长时间在执行状态变化。

需要注意的是 delay的参数是在时间的后面

div {
	transition: 状态完成时间 height, 状态完成时间 延迟时间(delay) width;
}

div {
	transition: 2s height, 0.5s 2s width;
}

完整代码

delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果

transition-timing-function

transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease

div {
	transition: 1s ease;
}

除了ease以外，其他模式还包括

• linear：匀速
• ease-in：加速
• ease-out：减速
• ease-in-out：规定以慢速开始和结束的过渡效果
• cubic-bezier函数：自定义速度模式 链接

注意事项

1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀 transition兼容性
2. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态，什么none到block之类的是不行的
3. transition是一次性的，不能重复发生，除非一再触发。