CSS3边框
-
border-radius:CSS3圆角边框。
-
在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;
-
box-shadow:CSS3边框阴影。
-
在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
-
border-image:CSS3边框图片。
-
通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;
CSS3背景
-
background-size:属性规定背景图片的尺寸。
-
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
-
background-origin:属性规定背景图片的定位区域。
-
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
-
background-clip:规定背景的绘制区域。
CSS3文字效果
-
hanging-punctuation:规定标点字符是否位于线框之外。
-
punctuation-trim:规定是否对标点字符进行修剪。
-
text-align-last:设置如何对齐最后一行或紧挨着强制换行符之前的行。
-
text-emphasis:向元素的文本应用重点标记以及重点标记的前景色。
-
text-justify:规定当 text-align 设置为 “justify” 时所使用的对齐方法。
-
text-outline:规定文本的轮廓。
-
text-overflow:规定当文本溢出包含元素时发生的事情。
-
text-shadow:向文本添加阴影。
-
text-wrap:规定文本的换行规则。
-
word-break:规定非中日韩文本的换行规则。
-
word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。
CSS3转换
-
transform 向元素应用 2D 或 3D 转换。
-
transform-origin 允许你改变被转换元素的位置。
-
transform-style 规定被嵌套元素如何在 3D 空间中显示。
-
perspective 规定 3D 元素的透视效果。
-
perspective-origin 规定 3D 元素的底部位置。
-
backface-visibility 定义元素在不面对屏幕时是否可见。
CSS3 过渡:
当元素从一种样式变换为另一种样式时为元素添加效果。
transition:简写属性,用于在一个属性中设置四个过渡属性。
transition-property:规定应用过渡的 CSS 属性的名称。
transition-duration:定义过渡效果花费的时间。默认是 0。
transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”。
transition-delay:规定过渡效果何时开始。默认是 0。
CSS3动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
@keyframes:规定动画。
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”。
animation-fill-mode:规定对象动画时间之外的状态。
CSS3多列
-
mn-rule-width:指定两列间边框的厚度
-
column-span:指定元素要跨越多少列
-
column-width:指定列的宽度
-
columns:设置 column-width 和 column-count 的简写
CSS3用户界面
-
resize:属性规定是否可由用户调整元素尺寸。
-
box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
-
outline-offset:属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
-
appearance:允许您使一个元素的外观像一个标准的用户界面元素。
-
icon:为创作者提供了将元素设置为图标等价物的能力。
-
nav-down:指定在何处使用箭头向下导航键时进行导航。
-
nav-index:指定一个元素的Tab的顺序。
-
nav-left:指定在何处使用左侧的箭头导航键进行导航。
-
nav-right:指定在何处使用右侧的箭头导航键进行导航。
-
nav-up:指定在何处使用箭头向上导航键时进行导航。