CSS3新特性學(xué)習(xí)

wing324 發(fā)布于2019-08-29 12:31 / 1671人閱讀

摘要：引言最近發(fā)現(xiàn)很多的新特性不熟悉，所以今天把它們都學(xué)習(xí)一邊，做出效果加深印象，說(shuō)到還加了蠻多的特性，像一些的一些效果，動(dòng)畫(huà)屬性等。

引言

最近發(fā)現(xiàn)很多css3的新特性不熟悉，所以今天把它們都學(xué)習(xí)一邊，做出效果加深印象，說(shuō)到css3還加了蠻多的特性，像一些border的一些效果，動(dòng)畫(huà)屬性animation trasiform等。

1.border-radius（邊框圓角） 效果

　實(shí)現(xiàn)代碼：

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

加上下面這兩個(gè)是為了兼容chrome和fixfox舊版本

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

這個(gè)屬性很有趣，還可用來(lái)畫(huà)圓，把值設(shè)為百分比，可以畫(huà)任意大小的圓

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

　圓效果

2.box-shadow（邊框陰影）

這個(gè)可就厲害了，可以做出立體效果，也可以使邊框很炫酷

　語(yǔ)法：

box-shadow: h-shadow v-shadow blur spread color inset;    
h-shadow:水平陰影位置
v-shadow:垂直陰影位置
blur:模糊距離
spread：陰影尺寸
color：陰影顏色
inset：內(nèi)部陰影 默認(rèn)為outset

　效果

　代碼

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

用在input上

代碼

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

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

設(shè)置div的寬高固定，文字太多時(shí)會(huì)超出div的邊框

我們要實(shí)現(xiàn)下面效果，以三個(gè)點(diǎn)號(hào)代替省略的文字

代碼

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

　４.transform（動(dòng)畫(huà)）

鼠標(biāo)移入時(shí)動(dòng)畫(huà)：

樣式

    .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 */
    }

鼠標(biāo)移入時(shí)

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

未完待續(xù)。。