CSS3被划分为模块,其中最重要的CSS3模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
1、边框
- border-image:设置所有border-image-*属性的简写形式。
可能的值有:border-image-source:用在边框的图片的路径;border-image-slice:图片边框向内偏移;border-image-width:图片边框的宽度;border-image-outset:边框图像区域超出边框的量;border-image-repeat:图像边框是否平铺(repeated)、铺满(rounded)或拉伸(stretched)
- border-radius:设置所有四个border-*-radius属性的简写形式
- box-shadow:向方框添加一个或多个阴影。
box-shadow: h-shadow(必需,水平阴影的位置) v-shadow(必需,垂直阴影的位置) blur(可选,模糊距离) spread(可选,阴影的尺寸) color(可选,阴影的颜色) inset(可选,将外部阴影outset改为内部阴影);
/* border-image测试,border-width是关键,是否虚线实现还是border-color不重要 */
.border-image-ele, .border-image-ele2{
display: inline-block; padding: 5px 10px;
border: 10px dashed black; margin: 10px;
}
.border-image-ele{ border-image: url(../img/star/border.png) 30 30 round; }
.border-image-ele2 { border-image: url(../img/star/border.png) 30 30 stretch;}
2、颜色
- background-clip:border-box | padding-box | content-box; 规定背景的裁剪区域,默认值为border-box;
border-box: 背景被裁剪到边框盒;padding-box: 背景被裁剪到内边距框;content-box: 背景被裁剪到内容框
- background-origin: padding-box | border-box | content-box; 规定背景图片的定位,默认值为padding-box。
padding-box: 背景图片相对于内边距来定位;border-box: 背景图片相对于边框盒来定位;content-box: 背景图片相对于内容框来定位
- background-size: length | percentage | cover | contain; 规定背景图片的尺寸,默认值为auto。
length: 设置背景图片的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto;percentage: 以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto;cover: 把背景图片扩展至足够大,以使背景图片完全覆盖背景区域,背景图片的某些部分也许无法显示在背景定位区域中;contain: 把背景图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域
3、文本效果
- text-overflow:clip | ellipsis; 规定文本溢出包含元素时发生的事情。
clip: 修剪文本;ellipsis:显示省略号来代表被修剪的文本;
- text-shadow:语法
text-shadow: h-shadow v-shadow blur color;
,向文本添加阴影。h-shadow:水平阴影的位置(必需); v-shadow: 垂直阴影的位置(必需); blur: 模糊的距离(可选); color: 阴影的颜色(可选)
- word-break:normal | break-all | keep-all; 规定非中日韩文本的换行规则。
normal:使用浏览器默认的换行规则;break-all:允许在单词内换行;keep-all:只能在半角空格或连字符处换行
- word-wrap:normal | break-word; 允许长单词或url地址换行到下一行。
normal:只在允许的断字点换行(浏览器保持默认处理);break-word:在长单词或url地址内部进行换行。
4、字体
通过CSS3, Web设计师再也不必被迫使用“web-safe”字体了。
在CSS3 之前,web设计师必须使用已在用户计算机上安装好的字体。通过CSS3,web设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时,可将该字体文件存放到web服务器上,它会在需要时自动下载到用户的计算机上。您“自己的”字体是在CSS3 @font-face规则定义的。
<style>
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div { font-family: myFirstFont; }
</style>
- font-family:规定字体的名称(必需)
- src:定义字体文件的url(必需)
- font-stretch:定义如何拉伸字体(可选),默认是normal
- font-style:定义字体的样式(可选),默认是normal
- font-weight:定义字体的粗细(可选),默认是normal
- unicode-range:定义字体支持的UNICODE字符范围(可选),默认是“U+0-10FFFF”
5、2D转换
通过CSS转换,我们能够对元素进行移动、缩放、转动、拉伸。
transform的2D转换方法有:
- translate(x, y):元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数。
- rotate(angle):元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
- scale(x, y):元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数
- skew(x-angle, y-angle):元素翻转给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数
- matrix(n,n,n,n,n,n):将所有2D转换方法组合在一起。需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。示例:
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
transform-origin:允许改变被转换元素的位置。该属性必须和transform属性一同使用。使用格式:transform-origin: x-axis y-axis z-axis;
x-axis | y-axis | z-axis 定义视图被置于X轴 | Y轴 | Z轴的位置,可能的值有:top | right | bottom | left | center | length | % 。 默认形变中心是50% 50%,即元素中心,如果设置值为:left top;则刑辩中心变成了左上角。
6、3D转换
3D转换的使用属性除了2D中的transform和transform-origin, 还有transform-style、perspective、perspective-origin、backface-visibility。
- transform-style:规定被嵌套元素如何在3D空间中显示。语法:
transform-style: flat | preserve-3d;
,flat表示子元素不保留其3D尾椎;preserve-3d表示子元素保留其3D位置。 - perspective:规定3D元素的透视效果。语法:
perspective: numer | none;
,number表示元素距离视图的距离;none表示默认值,为0,不设置透视。 - perspective-origin:规定3D元素底部位置。语法:
perspective-origin: x-axis y-axis;
,x-axis | y-axis 定义该视图在X轴 | Y轴上的位置,可能的值有left | top | right | bottom | center | length | %。 - backface-visibility:定义元素在不面对屏幕时是否可见。语法:
backface-visibility: visible | hidden;
,visible表示背面是可见的,默认是可见;hidden表示背面是不可见的。
7、过渡transition
过渡是元素从一种样式逐渐变为另一种效的效果。要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个CSS属性上
- 规定效果的时长
过渡的转换属性有这些: - transition:简写属性,用于在一个属性中设置四个过渡属性。语法:
transition: property duration timing-function delay;
,默认值是:all 0 ease 0
。举例说明,比如:transition: width 2s;
、transition: all 1s;
- transition-property:规定应用过渡的CSS属性的名称。语法:
transition-property: none | all | property
,none表示没有属性会获得过渡效果,all表示所有属性都会获得过渡效果,property表示定义应用过渡效果的css属性名称列表,多个属性则以逗号分隔。 - transition-duration:规定过渡效果话费的时间,默认是0。语法:
transition-duration: time;
,time规定完成过渡效果需要花费的时间。 - transition-timing-function:规定过渡效果的时间曲线,默认是ease。语法:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
,linear=规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1)),ease=规定慢速开始,然后变快,然后慢速结束的过渡效果,ease-in=规定慢速开始,ease-out=规定以慢速结束,ease-in-out=规定以慢速开始和结束的过渡效果,cubic-bezier(n,n,n,n)=在cubic-bezier函数中定义自己的值,可能的值是0至1之间的数值。 - transition-delay:规定过渡效果何时开始,默认是0。语法:
transition-delay: time;
, time表示规定在过渡效果开始之前需要等待的时间。
8、动画
如需在CSS3中创建动画,需要学习@keyframes规则。
@keyframes规则用于创建动画,在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
另外还需要把@keyframes捆绑到某个选择器。通过规定至少以下两项CSS3动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
可是使用关键词“from”和“to”, 也可以使用百分比来规定变化的时间。
语法:@keyframes: animationname { keyframes-selector {css-styles;} }
。animation-name表示动画的名称(必需);keyframes-selector表示动画时长的百分比(必需),合法的值:0-100% | from (与0%相同) | to(与100%相同);css-styles表示一个或多个合法的CSS样式属性(必需)
其他动画属性有:
- animation:所有动画属性的简写属性,除了animation-play-state属性
- animation-name:规定你@keyframes动画的名称
- animation-duration:规定动画完成一个周期所花费的秒或毫秒,默认为0
- animation-timing-function:规定动画的速度曲线,默认是“ease”
- animation-delay:规定动画何时开始,默认是0
- animation-iteration-count:规定动画被播放的次数,默认是1
- animation-direction:规定动画是否在下一周期逆向地播放,默认是normal
- animation-play-state:规定动画是否正在运行或暂停,默认是running。值有paused表示暂停,running表示动画正在播放。
- animation-fill-mode:规定对象动画时间之外的状态。语法:
animation-fill-mode: none | forwards | backwards | both;
,none表示不改变默认行为;forwards表示当动画完成后,保持最后一个属性值(在最后一个关键帧中定义);backwards表示animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义);both表示向前和向后填充都被应用。
9、多列
通过多列属性,可以对文本内容进行多列布局。
- column-count:规定元素应该被分隔的列数
- column-fill:规定如何填充列
- column-gap:规定列之间的间隔
- column-rule: 设置所有column-rule-*属性的简写属性
- column-rule-color:规定列之间规则的颜色
- column-rule-style:规定列之间规则的样式
- column-rule-width:规定列之间规则的宽度
- column-span:规定元素应该横跨的列数
- column-width: 规定列的宽度
- columns:规定设置column-width和column-count的简写属性
10、用户界面
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
- box-sizing:允许您以确切的方式定义适应某个区域的具体内容。例如,假如您需要并排放置两个带边框的框,可通过将box-sizing设置为“border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框盒内边距放入框中。
- outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
- resize:规定是否可有用户对元素的 尺寸进行调整