CSS/CSS3常用的樣式兼容，樣式總結

這篇文章這篇文章主要介紹了css中常用但是又難記的樣式作為總結，方便大家學習和使用。包括了‘單行縮略號‘、’css圓角兼容'、‘元素陰影’，‘border取消寬度影響’,‘css3的背景漸變’，‘css的透明’等等

單行縮略號  

.overhid{
    overflow: hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

 

css圓角兼容  

.setradius{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

 

元素陰影  

.boxShadow{
    -moz-box-shadow: 5px,5px,1px,#000;
    -webkit-box-shadow:5px,5px,1px,#000;
    box-shadow: 5px,5px,1px,#000;
}

 

參數：box-shadow:none | [inset  x-offset y-offset blur-radius spread-radius color], [inset  x-offset y-offset blur-radius spread-radius color]   

none：默認值，元素沒有任何陰影效果。
inset：陰影類型，可選值。如果不設置，其默認的投影方式是外陰影；如果取其唯一值“inset”，就是給元素設置內陰影。
x-offset：陰影水平偏移量，其值可以是正負值。如果取正值，則陰影在元素的右邊，反之取負值，陰影在元素的左邊。
y-offset：陰影垂直偏移量，其值可以是正負值。如果取正值，則陰影在元素的底部，反之取負值，陰影在元素的頂部。
blur-radius：陰影模糊半徑，可選參數。其值只能是正值，如果取值為“0”時，表示陰影不具有模糊效果，如果取值越大，陰影的邊緣就越模糊。

spread-radius：陰影擴展半徑，可選參數。其值可以是正負值，如果取值為正值，則整個陰影都延展擴大，反之取值為負值，則整個陰影都縮小。
color：陰影顏色，可選參數，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在Webkit內核下的瀏覽器將無色，也就是透明，建議不要省略這個參數。

border取消寬度影響

.noborder{/*border 0width*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 

css3的背景漸變

.background{
  background:-webkit-linear-gradient(top,#FFF,#cb1919);
  background:-o-linear-gradient(top,#FFF,#cb1919);
  background:-ms-linear-gradient(top,#FFF,#cb1919);
  background:-moz-linear-gradient(top,#FFF,#cb1919);
  background:linear-gradient(top,#FFF,#cb1919);
}

 

css的透明

.transparent{
    filter:alpha(opacity=50);   
    -moz-opacity:0.5;   
    -khtml-opacity: 0.5;   
    opacity: 0.5;   
}

 

取消div選中藍色背景

.nousel{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
}

 

//說明：1.IE6-9不支持該屬性但支持使用標簽屬性 onselectstart="return false;"2.直到Opera不支持該屬性，支持使用私有的標簽屬性 unselectable="on";

css3設置字體

@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

 

 

取消移動端元素被點擊高亮顯示 

.nohighlight{
   -webkit-tap-highlight-color: transparent;
}

 

 取消移動端表單元素的默認風格

input,textarea{
   -webkit-appearance: none;
}

辦公資源網址導航 https://www.wode007.com

取消表單元素的輪廓樣式

input{
outline:none;
}

 

textarea去掉右側滾動條，去掉右下角拖拽  

textarea{
  overflow:hidden;
  resize:none;
}