web前端-html-css笔记整合CSS3

最新css教程之CSS3

css3算是对之前css的拓充，以展现新的效果。

css背景

多重背景
background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

背景尺寸
background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）

背景起始
background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

背景修剪
background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

css渐变

线性渐变

如需创建线性渐变，必须定义至少两个色标。呈现平滑过渡的颜色。可以设置起点和方向（或角度）以及渐变效果，默认是从上到下。

语法
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
background-image: linear-gradient(angle, color-stop1, color-stop2);

径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法
background-image: radial-gradient(shape size at position, start-color, …, last-color);

设置形状
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。
设置大小
closest-side
farthest-side
closest-corner
farthest-corner

css阴影

文字阴影

CSS text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

例：
创建文字边框
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
两种还不赖的效果
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

元素阴影

box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影

例：卡片效果
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

css文本

文字溢出
text-overflow 属性规定应如何向用户呈现未显示的溢出内容
clip 值表示裁剪
ellipsis值标识省略

文字换行
word-wrap 属性使长文字能够被折断并换到下一行。

书写模式
writing-mode 属性规定文本行是水平放置还是垂直放置

css转换

转换（transforms）允许您移动、旋转、缩放和倾斜元素

2D转换方法：

方法	功能
translate()	从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）
rotate()	根据给定的角度顺时针或逆时针旋转元素
scale()	增加或减少元素的大小（根据给定的宽度和高度参数）
skew()	使元素沿 X 和 Y 轴倾斜给定角度
matrix()	把所有 2D 变换方法组合为一个

ps:
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3D转换方法

css过渡

在给定的时间内平滑地改变属性值

常用属性

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性
transition-delay	规定过渡效果的延迟（以秒计）
transition-duration	规定过渡效果要持续多少秒或毫秒
transition-property	规定过渡效果所针对的 CSS 属性的名称
transition-timing-function	规定过渡效果的速度曲线

ps：transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

css动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash

@keyframes 规则
在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。

动画属性

属性	功能
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。