css3 border
ps：ie9只支持border-radius和box-shadow
1.border-radius 增加圆角
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
2.box-shadow(参数：box-shadow: h-shadow v-shadowds blur阴影尺寸 spread color inset;)
div
{
box-shadow: 10px 10px 5px #888888;
}
3.border-image
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
css3 background
1.background-size(参数支持百分比，百分比是相对于父元素)
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
2.background-origin
可以放置在content-box、padding-box 或 border-box 区域
3.background-image 可以接多个url，实现img的重叠
css3 文本效果
1.text-shadow（text-shadow: h-shadow v-shadow blur color）
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
2.word-wrap（单词换行）
p {word-wrap:break-word;}
CSS3 @font-face
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
2d转换
-
translate()元素从其当前位置移动， left（x 坐标） 和 top（y 坐标） -
rotate()元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 -
scale()元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 -
skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 -
matrix()matrix() 方法把所有 2D 转换方法组合在一起
3d转换
- rotateX()
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
- rotateY()
css3过渡
过渡
transition 简写属性，用于在一个属性中设置四个过渡属性。
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover
{
width:300px;
}
css3动画
@keyframes定义动画
animation 执行动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
css3多列
-
column-count创建的列数 -
column-gap列之间的间隔 -
column-rule列的规则
css3用户界面
-
resizediv由用户调节大小
div
{
resize:both;
overflow:auto;
}
-
box-sizing允许您以确切的方式定义适应某个区域的具体内容
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
-
outline-offset设定轮廓
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
