成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wing324 / 1668人閱讀

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

引言

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

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

　實現(xiàn)代碼： 
    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 */

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

    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：內(nèi)部陰影 默認(rèn)為outset
　效果

　代碼 
box-shadow: 10px 10px 4px #A5A5A5;
用在input上

代碼

box-shadow:0 0 8px 2px #9668db;
3.text-overflow(文本溢出隱藏）

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

我們要實現(xiàn)下面效果，以三個點號代替省略的文字

代碼

        text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
?。?transform（動畫）

鼠標(biāo)移入時動畫：

樣式

    .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)移入時

    .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ù)。。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111959.html

相關(guān)文章

  • Jdk1.8新特性學(xué)習(xí)（Optional）

    摘要：它的出現(xiàn)是為我們解決空指針異常的，以前我們寫代碼如果不進行判斷，會經(jīng)常出現(xiàn)異常。因為它本身就是個對象，不管放進去的對象為不為，始終不會返回，所以你也不需要在你的業(yè)務(wù)流程中進行一大堆的判斷，避免了程序運行時的空指針異常。 想必大家已經(jīng)在使用jdk1.8做項目開發(fā)，但是你對于它里面的一些性特性了解多少呢？有沒有在你的項目中運用呢？現(xiàn)在就和我來一起梳理一下吧。 介紹 它是java.util包...

    liaosilzu2007 評論0 收藏0

  • Es6新特性學(xué)習(xí)

    摘要：基礎(chǔ)語法變量提升都可以個難點在編譯時執(zhí)行并沒有報錯，執(zhí)行結(jié)果如圖注意結(jié)果沒有變更改結(jié)果值變了參考新特性未完一直更新 基礎(chǔ)語法 變量提升 //es5 var arr = []; for(var i=0; i

    AlphaWallet 評論0 收藏0

  • Java8新特性學(xué)習(xí)筆記

    摘要：雖然目前工作環(huán)境仍然以為主，不過目前已是大勢所趨了。標(biāo)準(zhǔn)函數(shù)式接口新的包定義旨在使用的廣泛函數(shù)式接口。這一改進使得擁有了類似于多繼承的能力。 從Java8發(fā)布到現(xiàn)在有好幾年了,而Java9也提上發(fā)布日程了(沒記錯的話好像就是這個月2017年7月，也許會再度跳票吧，不過沒關(guān)系，穩(wěn)定大于一切，穩(wěn)定了再發(fā)布也行)，現(xiàn)在才開始去真正學(xué)習(xí)，說來也是慚愧。雖然目前工作環(huán)境仍然以Java6為主，不過...

    wthee 評論0 收藏0

  • JDK 1.8 新特性學(xué)習(xí)（Stream）

    摘要：會在數(shù)據(jù)源內(nèi)部隱式的遍歷進行處理。會并行遍歷數(shù)據(jù)，將數(shù)據(jù)分成若干段，同時進行處理，最終匯總結(jié)果一起輸出。結(jié)束操作會觸發(fā)實際計算，計算發(fā)生時會把所有中間操作積攢的操作以的方式執(zhí)行，這樣可以減少迭代次數(shù)。為函數(shù)式編程而生。 Stream實現(xiàn)了對數(shù)據(jù)源的流式處理，它可以并行操作，提高數(shù)據(jù)處理效率。 什么是流 流不是集合，它不對數(shù)據(jù)做保存，只是最數(shù)據(jù)進行算法處理，比如最大值，最小值，排序等操作...

    yhaolpz 評論0 收藏0

  • [ ES6 ] 一. ECMAScript 6 相關(guān)學(xué)習(xí)資源

    摘要：瀏覽器兼容性列表可以看到還是全線飄紅的和支持特新列表據(jù)此在和上使用這些新特新待補充二相關(guān)教程最重要的產(chǎn)品規(guī)格書，什么教程也脫離不了這里的標(biāo)準(zhǔn)，英文好的還是多看點。 一. ES6新特性相關(guān) es6features : 經(jīng)典的ES6新特性預(yù)覽，github 逼近 10k star . ES6新特性概覽 ：同樣也很全面的特性介紹的中文版。 瀏覽器兼容性列表 ：可以看到還是全線飄紅的~~~ ...

    Towers 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<