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/

欢迎访问