CSS3新特性
文章目录
CSS3 简介
CSS3
是 CSS
的第三个版本,也是目前最新的版本,添加了一些新的特性,如:
- 新增选择器:属性选择器、结构性伪类选择器、伪元素选择器等等。
- 新增属性:
border-radius
,background-size
,box-sizing
等等。 - 新增渐变色:之前都是使用图片进行平铺操作,使用渐变色可以减少服务器的压力和带宽,加快页面渲染。
- 新增变形:平移,缩放,旋转,倾斜等,
2d
变形和3d
变形。 - 新增过渡:从一种效果过渡到另外一种效果。
- 新增动画:
- 新增媒体查询:通过媒体查询实现响应式布局。
- 新增
flex
布局:
CSS3 新增属性介绍
新增盒子阴影、文字阴影
-
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。 inset 可选。将外部阴影(outset)改为内部阴影。
注:
box-shadow
向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由2-4
个长度值。 -
文字阴影
text-shadow: h-shadow v-shadow blur color; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 color 可选。阴影的颜色。
新增圆角边框
border-radius:固定值 | 百分比(相对父元素)
-
按照值的多少进行分类
- 单值法:
border-radius:10px;
左上角、右上角、右下角、左下角圆角都设置为10px
。 - 二值法:
border-radius:10px 20px;
左上角、右下角为10px
,右上角、左下角为20px
。 - 三值法:
border-radius:10px 20px 30px;
左上角10px
、右上角、左下角为20px
,右下角为30px
。 - 四值法:
border-radius:10px 20px 30px 40px;
从左上角开始顺时针分别设置10px
,20px
,30px
,40px
。
- 单值法:
-
按照四个边角进行分类
- border-top-left 设置左上角
- border-top-right 设置右上角
- border-bottom-right 设置右下角
- border-bottom-left 设置左下角
圆形:首先元素必须是正方形,然后设置圆角边框像素值为元素(标准盒)宽或高的一半,但真正好用的是使用百分比 50%(不受 padding ,border 的影响)。
新增线性渐变和径向渐变
CSS3
的渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡;在以前,你必须使用图像来实现这些效果。
通过使用 CSS3
渐变(gradients),你可以减少下载的时间和带宽的使用。
渐变效果的元素在放大时看起来效果更好,因为渐变(gradients)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
-
线性渐变(Linear Gradients)
想要创建一个线性渐变,你必须至少定义两种颜色结点(即你想要呈现平稳过渡的颜色)。同时,你也可以设置一个起点和一个方向(或一个角度)。
// 浏览器兼容写法 // -webkit- 兼容谷歌、苹果 -moz- 兼容火狐 -ms- 兼容IE -o- 兼容欧朋 background-image: -webkit-linear-gradient(direction,color-stop1,color-stop2,...); backgroung-image: -moz-linear-gradient(direction,color-stop1,color-stop2,...); background-image: -o-linear-gradient(direction,color-stop1,color-stop2,...); /*兼容性写法中 direction 值的写法为 top、right、bottom、left、left top、right bottom 等,为起始方向。*/ // 标准写法 background-image: linear-gradient(direction,color-stop1,color-stop2,...); /*标准写法中 direction 的值的写法为 to top、to right、to left、to bottom right 等等,为结束方向。 // 我们还可以设置渐变的位置 background-image: linear-gradient(direction,color-stop1 position1,color-stop2 position2,...); 如:background-image: linear-gradient(to right,red 50%,green 90%,blue); 或者 background-image: linear-gradient(to right,red 200px,green 500px,blue);
-
径向渐变(Radial Gradients)
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是
center
(表示在中心点),渐变的形状是ellipse
(表示椭圆形),渐变的大小是farthest-corner
(表示到最远的角落)。语法:background-image: radial-gradient(shape size at position,start-color,...,last-color); 举例: background-image: radial-gradient(red,green,blue);颜色结点均匀分布(默认情况下) background-image: radial-gradient(red 5%,green 15%,blue 60%); 颜色结点不均匀分布 background-image: radial-gradient(red,yellow,green); 默认椭圆 Ellipse background-image: radial-gradient(circle,red,yellow,green); 设置圆形 Circle background-image: radial-gradient(circle at top,red,yellow,green); 设置从顶部开始渐变
定义渐变的位置,可能值:
- center(默认): 设置中间为径向渐变圆心的纵坐标值。
- top:设置顶部为径向渐变圆心的纵坐标值。
- bottom:设置底部为径向渐变圆心的纵坐标值。
定义渐变的大小,可能值:
- farthest-corner(默认):指定径向渐变的半径长度为从圆心到离圆心最远的角。
- farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边。
- closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角。
- closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边。
定义圆的类型:
- ellipse(默认):指定椭圆形的径向渐变。
- circle:指定圆形的径向渐变。
新增选择器
新增了一些属性选择器、结构性伪类选择器和伪元素选择器。
新增 transform 属性
transform
属性就是变形,即平移、旋转、缩放和倾斜。
- translate
- rotate
- scale
- skew
transform
不会对其他元素布局产生影响。
平移 translate
我们可以给 translate
两个参数,让其在 X
轴和 Y
轴上产生平移。
// 将元素向右,向下平移 100px
transform: translate(100px, 100px);
// 将元素向右移动 100px
transform: translateX(100px);
// 将元素向上移动 1em
transform: translateY(-1em);
// 我们也可以使用百分数,但是这里的百分数是相对于图片自身大小的
transform: translate(100%, 100%);
旋转 rotate
// 将元素顺时针旋转 90°
transform: rotate(90deg);
// 也可以用 turn 做单位,一个 turn 就是一圈
transform: rotate(0.5turn);
// 我们可以用 transform-origin 这个属性来改变旋转的原点
transform-origin: 0 0; // 绕图片的左上角进行旋转
transform: rotate(-50deg);
transform-origin: 0 0;
transform: rotate(360deg);
// 我们也可以将元素沿着 X 轴或者 Y 轴进行旋转
transform: rotateX(30deg);
transform: rotateY(30deg);
缩放 scale
// 将元素沿 X 轴和 Y 轴放大 2 倍
transform: scale(2);
// 将元素沿 X 轴放大 3 倍,沿 Y 轴放大 0.5 倍
transform: scale(3,0.5);
// 缩放行为也和 transform-origin 这个属性相关
transform-origin: 0 0;
transform: scale(4);
transform-origin: 0 0;
transform: scaleY(2);
倾斜 skew
// 将元素在 X 轴方向上倾斜 30°
transform: skewX(30deg);
// 将元素在 Y 轴方向上倾斜 50°
transform: skewY(50deg);
// 也可以将元素同时在 X 轴方向上和 Y 轴方向上倾斜
transform: skew(30deg, 20deg);
因为 transform
属性是一个变形函数的列表,所以我们可以让一个元素同时进行多种变形。
// 先让元素沿 X 轴方向移动 100px 然后再顺时针旋转 90°
transform: translateX(100px)
rotate(90deg)
// 先让元素顺时针旋转 90°,然后再让元素沿 X 轴方向移动 100px
transform: rotate(90deg)
translate(100px)
/*这里我们可以看到上面两个的运行结果是不一样的,因为元素的变形是按照元素自身的坐标系进行的。初始状态下,元素自身的坐标系和页面的坐标系是一样的,但是在元素旋转了 90° 之后,元素的 X 轴变成了向下,所以上面两个的运行结果是不一样的。*/
// 下面这个例子,因为元素的变形是按照自身的坐标系进行的,因为这个坐标系已经放大过了,所以在元素自身的坐标系下移动 100px 就相当于是在页面上移动了 200px。
transform: scale(2)
translateX(100px)
rotate(90deg)
新增 transition 过渡
语法:transition: property duration timing-function delay;
默认值为: transition: all 0 ease 0;
transition 属性设置元素的过渡效果,四个简写属性为:
transition-property: 表示 CSS 属性的 name,transition 效果。
transition-duration: 表示 transition 效果需要指定多少秒或者毫秒才能完成。
transition-timing-function: 指定 transition 效果的转速曲线。
transition-delay: 定义 transition 效果开始的时候。
注意: 始终指定 transition-duration 属性,否则持续时间为 0 ,transition 不会有任何效果。
新增 animation 动画
语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
默认值为: animation: none 0 ease 0 1 normal
animation-name: 指定要绑定到的选择器的关键帧的名称。
animation-duration: 动画指定需要多少秒或毫秒完成。
animation-timing-function: 设置动画将如何完成一个周期。
animation-delay: 设置动画在启动前的延迟间隔。
animation-iteration-count: 定义动画的播放次数。
animation-direction: 指定是否应该轮流反向播放动画。
animation-fill-mode: 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state: 指定动画是否正在运行或已暂停。
initial: 设置属性为其默认值。
inherit: 从父元素继承属性。
transition 和 animation 的区别
-
transition
要设置触发条件才会触发, 而animation
不设置触发条件也会自动地触发。 -
transition
只有两种状态导致其只能实现比较简单的效果,而animation
由于百分比的属性使其更加灵活,实现效果更加逼真。 -
transition
和js
的结合性很好,而animation
更倾向于纯CSS
的实现,与js
的结合性不是很好。 -
transition
不能修改CSS
属性,但是animation
可以修改 CSS 属性。 -
transition
不能遍历循环,但是animation
可以遍历循环。 -
transition
子属性少,animation
子属性多。
总的来说 transition
比较简易,animation
比较复杂。