CSS3知识点
一、边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。
1.1圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中,很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角
CSS 拥有用于为元素的每个角指定圆角的属性:
border-radius: 15px 50px 30px 5px; :左上角为15px,右上角为50px,右下角为30px,左下角为5px。
border-radius: 15px 50px 30px; :左上角为15px,右上角和左下角为50px,右下角为30px。
border-radius: 15px 50px; :左上角和右下角为15px,右上角和左下角为50px。
border-radius: 15px; :四个角都是15px。
当我们需要创建一个圆形时 只需要把圆角设置成50%即可
1.2盒子阴影
CSS3 中的 box-shadow 属性被用来添加阴影:
1.3 边界图片
有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框。
要有边框 并且要给边框宽度
二、背景图片
2.1 background-image 属性
CSS3 中可以通过 background-image 属性添加背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
.example1 {
width: 700px;
overflow: auto;
padding: 5px 10px;
background-image: url('img/flower.gif'), url('img/paper.gif');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
2.2 background-size 属性
background-size 指定背景图像的大小。CSS3 以前,背景图像大小由图像的实际大小决定。
CSS3 中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。你可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
.example2 {
width: 400px;
overflow: auto;
padding: 5px 10px;
background-image: url('img/flower.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
}
2.3 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box、padding-box 和 border-box 区域内可以放置背景图像。
.example3-padding {
background-origin: padding-box; // 默认值
}
.example3-content {
background-origin: content-box;
}
.example3-border {
background-origin: border-box;
}
三、渐变
3.1概述
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的
使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
**径向渐变(**Radial Gradients) 由它们的中心定义
3.2CSS3线性渐变
为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设
置一个起点和一个方向(或一个角度)。
语法:
background-image: linear-gradient(direction/degree,color-stop1 占比, color-stop2 占比, ...);
direction方向:渐变的方向位置,属性值可以为(to)left、right、top、bottom(可组合使用)
角度:渐变终止方向的角度,角度以deg表示
起始颜色…
终止颜色… (颜色可以是多个)
方向可以使to right等、也可以是角度、也可以是对角 to right bottom
可以设置多个颜色节点
#grad {
/* 标准的语法 */
background-image: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
也可以使用透明度rgba
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
3.3CSS3径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以
指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状
是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
形状:ellipse(椭圆)/circle(圆形)
大小(半径):属性值可用像素或关键字表示(圆形演示)
closest-side:圆心到距离最近的边
farthest-side:圆心到距离最远的边
closest-corner:圆心到距离最近的角
farthest-corner:圆心到距离最远的角
发散方向:属性值可以为(at)left、right、top、bottom、center(可组合使用),像素,百分比
起始颜色…
终止颜色
颜色默认是均匀的 也可以在颜色名后加百分比使他们不均匀
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是
ellipse。
形状为圆形的径向渐变:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
四、过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。
4.1过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时
div:hover {
width: 200px;
}
4.2 多项改变
要添加多个样式的变换效果,添加的属性由逗号分隔。
示例代码如下:
div.transition {
width: 100px;
height: 100px;
color: white;
text-align: center;
transform: rotateZ(0deg);
background: red;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, transform 2s;
-o-transition: width 2s, height 2s, transform 2s;
}
div.transition:hover {
width: 300px;
height: 300px;
transform: rotateZ(45deg);
}
4.3 速度曲线
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值:
ease - 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认)
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
可以再浏览器调试器里 手动绘制速度曲线
4.4 延迟过渡效果
transition-delay 属性规定过渡效果的延迟(以秒计)。
下例在启动之前有 1 秒的延迟:
div {
transition-delay: 1s;
}
4.5 简写属性
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
}
以上代码可以简写为
div {
transition: width 2s linear 2s;
}
五 动画
5.1 什么是动画
动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画,您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
5.2**@keyframes** 规则
如果你在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效,必须将动画绑定到某个元素。
/* 动画代码 */
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
/* 应用动画的元素 */
.example1 {
animation-name: example1;
animation-duration: 4s;
}
5.3延迟动画
animation-delay 属性规定动画开始的延迟时间。
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
}
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example1 {
animation-name: example1;
animation-duration: 4s;
animation-delay: 2s;
}
5.4 运行次数
animation-iteration-count 属性指定动画应运行的次数。
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
5.5 反向或交替运行动画
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值:
normal - 动画正常播放(向前)。默认值
reverse - 动画以反方向播放(向后)
alternate - 动画先向前播放,然后向后
alternate-reverse - 动画先向后播放,然后向前
5.6 速度曲线
animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值:
ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
5.7 简写属性
div {
animation-name: example;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
以上样式可以简写为:
div {
animation: example 4s linear 2s infinite alternate;
}
六 文字效果
6.1文字阴影
CSS3 中, text-shadow 属性适用于文本阴影。
.text-shadow {
padding: 10px;
text-shadow: 5px 5px 5px #FF0000;
}
6.2盒子阴影
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影。
.box-shadow {
padding: 10px;
box-shadow: 10px 10px 5px #999999;
}
6.3 文字溢出
CSS3 文本溢出属性指定应向用户如何显示溢出内容。
p.clip {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
white-space: nowrap;
text-overflow: clip;
}
p.ellipsis {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
white-space: nowrap;
text-overflow: ellipsis;
}
6.4 服务端字体
使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family:myFirstFont;
}
</style>
七 2D转换
CSS 转换(transforms)允许你移动、旋转、缩放和倾斜元素。
通过使用 CSS transform 属性,你可以利用以下 2D 转换方法:
方法 | 描述 |
---|---|
translate() | 从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。 |
rotate() | 根据给定的角度顺时针或逆时针旋转元素。 |
scale() | 增加或减少元素的大小(根据给定的宽度和高度参数)。 |
scaleX() | 增加或减少元素的宽度。 |
scaleY() | 增加或减少元素的高度。 |
skewX() | 使元素沿 X 轴倾斜给定角度。 |
skewY() | 使元素沿 Y 轴倾斜给定角度。 |
skew() | 使元素沿 X 和 Y 轴倾斜给定角度。 |
matrix() | 把所有 2D 变换方法组合为一个。 |
7.1 translate() 方法
translate() 方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。
下面的例子把
.translate {
transform: translate(100px, 40px);
}
7.2rotate() 方法
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子把
.rotate-positive {
transform: rotate(20deg);
}
7.3scale() 方法
scale() 方法增加或减少元素的大小(根据给定的宽度和高度参数)。
下面的例子把
.scale-big {
transform: scale(2, 3);
}
下面的例子把
.scale-small {
transform: scale(0.5, 0.5);
}
7.4skewX() 方法
skewX() 方法使元素沿 X 轴倾斜给定角度。
下例把
.skewX {
transform: skewX(20deg);
}
7.5skewY() 方法
skewY() 方法使元素沿 Y 轴倾斜给定角度。
下例把
.skewY {
transform: skewY(20deg);
}
7.6skew() 方法
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。
下面的例子使
.skew {
transform: skew(20deg, 10deg);
}
7.7matrix() 方法
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数,其中包括数学函数,这些参数使你可以旋转、缩放、移动(平移)和倾斜元素。
参数如下:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
.matrix {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
八 3D转换
CSS3 还支持 3D 转换。
相信学过数学的同学对这一概念多多少少是知道的,我们要想有一个3D空间效果,也就是立体空间感,比如:正方
体、长方体……再比如我们生活所居住的房间也是3D立体空间的,主要有X轴、Y轴Z轴共同组成。
x对应左右
y对应上下
z对应前后
通过 CSS transform 属性,你可以使用以下 3D 转换方法:
rotateX()
rotateY()
rotateZ()
8.1 rotateX() 方法
rotateX() 方法使元素绕其 X 轴旋转给定角度。
.rotateX {
transform: rotateX(150deg);
}
8.2 rotateY() 方法
rotateY() 方法使元素绕其 Y 轴旋转给定角度
.rotateY {
transform: rotateY(130deg);
}
8.3 rotateZ() 方法
rotateZ() 方法使元素绕其 Z 轴旋转给定角度。
.rotateZ {
transform: rotateZ(90deg);
}
8.4 透视
perspective 指定了观察者与 z = 0 平面的距离,使具有三维位置变换的元素产生透视效果。
简单理解就是将电脑屏幕当做一个平面,用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远,视觉效果很小;
值越小,3D 效果就越明显。
九 flex布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方
便,比如,垂直居中就不容易实现。
2009 年,W3C 提出了一种新的方案—— Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得
到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能
9.1 Flex 布局是什么
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
9.2 基本概念
采用 Flex 布局的元素,称为 Flex 容器 (flex container),简称 容器 。它的所有子元素自动成为容器成员,称为
Flex 项目 (flex item),简称 项目 。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉
点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
9.3 容器的属性
以下 6 个属性设置在容器上:
flex-direction:决定主轴的方向。
flex-wrap:如果一条轴线排不下,如何换行。
flex-flow:flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content:定义项目在主轴上的对齐方式。
align-items:定义项目在交叉轴上如何对齐。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
9.3.1 flex-direction 属性
flex-direction 属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有 4 个值:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
9.3.2 flex-wrap 属性
默认情况下,项目都排在一条线(又称 轴线 )上。 flex-wrap 属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值:
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
9.3.3 flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap 。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
9.3.4 justify-content 属性
justify-content 属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取 5 个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右:
flex-start(默认值):左对齐。
flex-end:右对齐。
center: 居中。
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
9.3.5 align-items 属性
align-items 属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
9.3.6 align-content 属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取 6 个值:
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
9.4 项目的属性
以下 6 个属性设置在项目上:
order:定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
flex-grow:定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
flex-shrink:定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。它的默认值为 auto,即项目的本来大小。
flex: flex-grow 、 flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto 。
9.4.1 order 属性
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
.item {
order: <integer>;
}
9.4.2 flex-grow 属性
flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。
如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
9.4.3 flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。
如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。
9.4.4 flex-basis 属性
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主
轴是否有多余空间。它的默认值为 auto,即项目的本来大小
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
9.4.5 flex属性
flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值: auto ( 1 1 auto )和 none ( 0 0 auto )。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
9.4.6 align-self 属性
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto ,表
示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch 。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}