CSS3模块
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D和3D转换
- 动画
- 多列布局
- 用户界面
1、边框
- border-radius 【边框圆角】
- 单位：px/%
- 注意： 最大为盒子宽或高的50%,
可以分别设置上右下左的边框【特殊例：盒子的宽是高的2倍,给盒子上左、上右设置50%的圆角,出现的是一个半圆】
- box-shadow 【盒子阴影】
- 标准样式
- box.shadow:offset-x offset-y [blur [spread]] [color] [inset]
- offset-x 阴影水平偏移量。正为右,负为左
- offset-y 阴影垂直偏移量。正为下,负为上
- blur 阴影模糊程度,不可为负
- spread 阴影大小。正为阴影扩大[阴影大小大于盒子大小],负为阴影缩小[阴影大小小于盒子大小],0为阴影与盒子一样大小
- inset 表示添加内阴影,默认为外阴影
- box.shadow:10px 10px 5px #888888;
- 参数1:左右外阴影【正为右,负为左】;
- 参数2:上下外阴影【正为下,负为上】;
- 参数3:阴影扩散范围【不可为负】;
- 参数4:阴影颜色
- 注意:
- border-image 【图片边框】
2、背景
- CSS3背景属性
- background-image 背景图片
- background-size 背景尺寸
- backgreoud-origin 背景图片的位置区域
- border-box 边框
- padding-box 内边框
- content-box 内容
- background-clip 背景裁剪
background-image 背景图片 地址
background-image:url(""); 背景图片地址
background-position:right bottom,left top; 背景图片定位
background-repeat:no-repeat,repeat; 背景图片是否重复铺满
- 可设置多张背景图片,中间用逗号隔开,顶部显示第一张
background:url(") right bottom no-repeat,url("") left top repeat;
background-size 背景图片 尺寸
background-size:width[x] height[y]; 设置背景图片的尺寸
- 单位：px %
background-origin 背景图片 位置区域
- border-box 图片边界会出现在容器边框位置,占据容器外边框的位置
- padding-box 图片边界会出现在容器内部,会占据容器的内边距的位置,从容器开始,不会占据容器边框位置
- content-box 图片出现在容器中的内容区域,不会占据元素的内边距
background-clip 背景图片 裁剪属性
- 没有经过背景裁剪裁剪【以颜色为例】
- padding-box
- content-box
3、渐变
- CSS3定义了两种渐变方式
- 线性渐变(Linear Gradients) 向上、向下、向左、向右、对角方向
- 径向渐变(Radial Gradients) 由它们的中心定义 就是说从中心开始呈圆形向外扩散
线性渐变
background-image:linear-gradient(direction,colot-stop1,color-stop2,...);
参数1:
方向
to left 向左;
to right 向右;
to bottom 向下;
to top 向上;
to bottom right 向右下角;
to bottom left 向左下角;
to top left 向左上角;
to top right 向右上角
参数2:
第一个颜色
参数3:
第二个颜色
之后的参数都是颜色(颜色可使用透明度)
- 注意：
颜色后面可跟百分比,表示该颜色占总面积的多少
- 使用角度
- 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
径向渐变
- 径向渐变也就是从图形的中心开始向外扩散的一种渐变方式
- 也可在颜色后添加使用百分比,改变其颜色分布
- 设执形状
- 可在参数1上添加一个参数,shape改变径向渐变的形状(circle:圆形;ellipse:椭圆形;默认为:ellipse 椭圆形)
- 不同尺寸的关键字使用
- closest-side 最近角(从圆心开始,半径所到达的最近的角)
- farthest-side 最远的角(从圆心开始,半径所达到的最远的角)
- colsest-corner 最近的边(从圆心开始,半径所达到最近的边)
- farthest-corner 最远的边(从圆心开始,半径所达到的最远的边)
- 重复的径向渐变
- background-image:repeating-radial-gradient(color1,color2,color3);
3、CSS3文本效果
- text-shadow 文本阴影
- text-shadow:5px 5px 5px blue;
- 参数1:水平阴影
- 参数2:垂直阴影
- 参数3:模糊距离
- 参数4:阴影的颜色
- box-shadow 盒子阴影
- 参数1:水平阴影
- 参数2:垂直阴影
- 参数3:模糊距离
- 参数4:阴影的颜色
- 注意:
- 可以使用 :: before和 :: after两个伪元素中添加阴影效果
- text-overflow 如何显示溢出内容
- ellipsis 多余部分会以省略号形式出现
- clip 多余部分直接"消失"截断
- string 使用给定的字符串代替多余的文字部分(只对火狐有效)
- word-wrap 换行
- break-word 强制文本换行 将会分裂中间的一个字
- word-break 单词拆分换行
4、CSS3 2D 转换
- translate()
- 根据左(x)轴和顶部(y)轴位置给定的参数,从当前元素位置进行移动
- translate(50px,100px)
- rotate()
- 单位:deg
- 给定一定的角度,正值顺时针进行旋转,负值逆时针进行循环
- rotate(30deg)
- scale()
- 元素的放大以及缩小,取决于宽度(x轴)和高度(y轴)的参数
- scale(2,3)
- 若只书写一个参数,宽高都根据这个参数进行放大缩小
- skew()
- 两个参数,分别代表X轴和Y轴倾斜的角度,若第二个参数为0,则默认为0,参数为负则向反方向移动
- skewX(<angle>):表示只在X轴(水平方向)倾斜
- skewY(<angle>):表示只在Y轴(垂直方向)倾斜
- skew(30deg,20deg)
- matrix()
5、CSS3 3D 转换
- rotateX()
- rotateY()
- transform-origin:x-axis y-axis z-axis;
- x-axis
- 定义视图被置于X轴的何处
- 值：
- left
- center
- right
- length
- %
- y-axis
- 定义视图被置于y轴的何处
- 值：
- top
- center
- bottom
- length
- %
- z-axis
- transform-style
- 指定嵌套属性是怎样在三维空间中呈现的
- flat
- preserve-3D
6、CSS3 过渡
- transition-property
- 指定CSS属性的name,transition效果
- transition-duration
- transition效果需要制定多少时间(单位：s/ms)
- transition-timing-function
- 指定transition效果的转速曲线
- 值：
linear 匀速
ease 慢-快-慢
ease-in 慢-快
ease-out 以慢结束
ease-in-out 以慢速开始和结束
cubic-bezier(n,n,n,n) 自定义(0-1)
- transition-delay
- 定义transition开始的时候
time 指定需要等待多少时间等待效果开始
7、CSS3 动画
1、 @keyframes 规定(设置)动画
- 语法:@keyframes animationname {keyframes-selector {css-styles;}}
- animationname
- 定义animationname动画名称,必须要有
- keyframes-selector
- 动画持续时间百分比
合法值：
0-100%
from(和0%相同)
to(和100%相同)
注意：可以用一个动画 keyframes-selectors
- css-style 一个或多个合法的CSS样式属性
2、 animation 所有动画属性的简写属性
- animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name
- 指定要绑定到选择器关键帧名称
- animation-duration
- 动画指定需要多少秒或毫秒完成(动画时间)
- animation-timing-function
- 设置动画将如何完成一个周期(设置动画的速度曲线)
- 默认是"ease"
linear 匀速
ease 慢-快-慢
ease-in 慢-快
ease-out 以慢结束
ease-in-out 以慢速开始和结束
cubic-bezier(n,n,n,n) 自定义(0-1)
- animation-delay
- 设置动画在启动前的延迟间隔
- 默认是"0"
- animation-iteration-count
- 定义动画的播放次数
- 默认是"1"
- animation-direction
- 规定动画是否在下一周你想播放地播放
- 语法：
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
- 默认是"normal"
- normal(默认值)
- reverse(动画反向播放)
- alternate(动画在奇次数正向播放,在偶次数反向播放)
- alternate-reverse(动画在奇次数反向播放,在偶次数正向播放)
- initial(设置该属性为它的默认值)
- inherit(从父元素继承该属性)
- animation-fill-mode
- 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
- animation-play-state
- 指定动画是否正在运行或已暂停
- 语法：
animation-play-state: paused|running;
- 默认是"running"
- paused(指定暂停动画)
- running(指定正在运行的动画)
- intial
- 设置属性为其默认值
- inherit
- 从父元素继承属性
8、CSS3 多列
- column-count 指定需要分割的列数
- column-count:3; 将文本内容分为3列
- column-gap 制定了列与列的间隙
- column-gap:30px; 列与列之间的间隙为30像素
- column-fill 指定如何填充列
- 语法：
column-fill: balance|auto;
- balance(列长短平衡。浏览器应尽量减少改变列的长度)
- auto(列顺序填充,他们将有不同的长度)
- column-rule 是 column-rule-* 所有属性的简写
- 包括边框的厚度、样式、颜色
- column-rule-style 指定了列与列间的边框样式
- column-rule-style:solid; 列与列间的边框为黑色单实线
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
- column-rule-width 指定了两列的边框厚度
- column-rule-width:1px; 两列边框厚度为1px
- column-rule-color 指定了两列的边框颜色
- column-rule-color:blue; 两列边框颜色为蓝色
- column-span 指定元素跨越多少列
- column-span:all; 元素跨越所有列
- column-width 指定列的宽度
- column-width:100px; 列的宽度为100px
- columns column-width和column-count的简写属性
9、CSS3 用户界面
用户界面属性
- resize
- 调整尺寸
- 语法：
resize: none|both|horizontal|vertical;
- none 用户无法调整元素的尺寸
- both 用户可调节元素的高度和宽度
- horizontal 用户只能调节元素的宽度
- vertical 用户只能调节元素的高度
- box-sizing
- 调整方框大小
- 语法：
box-sizing: content-box|border-box|inherit;
- content-box 指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
- border-box 指定宽度和高度(最小/最大属性)确定元素边框。
【也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。】
- inherit 指定 box-sizing 属性的值,应该从父元素继承
