CSS3新特性學習

時間 2019-11-08

標籤 css3 css 特性學習欄目 CSS 简体版

原文原文鏈接

引言

最近發現不少css3的新特性不熟悉，因此今天把它們都學習一邊，作出效果加深印象，說到css3還加了蠻多的特性，像一些border的一些效果，動畫屬性animation trasiform等。css

1.border-radius（邊框圓角）

效果

　實現代碼：

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

加上下面這兩個是爲了兼容chrome和fixfox舊版本css3

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

這個屬性頗有趣，還可用來畫圓，把值設爲百分比，能夠畫任意大小的圓web

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

　圓效果

2.box-shadow（邊框陰影）

這個可就厲害了，能夠作出立體效果，也可使邊框很炫酷chrome

　語法：

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的邊框動畫

咱們要實現下面效果，以三個點號代替省略的文字spa

代碼3d

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

　４.transform（動畫）

鼠標移入時動畫：code

樣式orm

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