CSS3新特性学习

引言

最近发现很多css3的新特性不熟悉，所以今天把它们都学习一边，做出效果加深印象，说到css3还加了蛮多的特性，像一些border的一些效果，动画属性animation trasiform等。

1.border-radius（边框圆角）

效果

　实现代码：

    height: 100px;    width: 100px;    margin: 0 auto;    background-color: #E0e0e0;    border-radius: 10px

加上下面这两个是为了兼容chrome和fixfox旧版本

    -moz-border-radius: 10px;/* chrome */       -webkit-border-radius: 10px;/* fixfox */

---

这个属性很有趣，还可用来画圆，把值设为百分比，可以画任意大小的圆

    border-radius: 50%;    -moz-border-radius: 50%;/* chrome */    -webkit-border-radius: 50%;/* fixfox */

　圆效果

2.box-shadow（边框阴影）

这个可就厉害了，可以做出立体效果，也可以使边框很炫酷

　语法：

box-shadow: h-shadow v-shadow blur spread color inset;  h-shadow:水平阴影位置v-shadow:垂直阴影位置blur:模糊距离spread：阴影尺寸color：阴影颜色inset：内部阴影 默认为outset

　效果

　代码

box-shadow: 10px 10px 4px #A5A5A5;

---

用在input上

代码

box-shadow:0 0 8px 2px #9668db;

3.text-overflow(文本溢出隐藏）

设置div的宽高固定，文字太多时会超出div的边框

我们要实现下面效果，以三个点号代替省略的文字

代码

    text-overflow:ellipsis;    overflow:hidden;    white-space:nowrap;

　４.transform（动画）

鼠标移入时动画：

样式

    .di{            width: 100px;            height: 100px;            margin: 100px auto;            background-color: #E0e0e0;            transition:width 1s, height 1s;            -moz-transition:width 1s, height 1s, -moz-transform 1s; /* 可以支持Firefox 4 */            -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* 可以支持Safari and Chrome */            -o-transition:width 1s, height 1s, -o-transform 1s; /* 可以支持Opera */    }

鼠标移入时

    .di:hover{        width:200px;        height:200px;        transform:rotate(180deg); /*旋转180度*/        -moz-transform:rotate(180deg); /* 可以支持Firefox 4 */        -webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */        -o-transform:rotate(180deg); /* 可以支持Opera */    }

未完待续。。

个人站：http://gdmec07140603.github.io/

欢迎访问