css整理

移動端Retina屏幕圖片模糊

//圖標icon.png是16x16, 設備是2x的Retina屏，那麼你得準備一個icon@2x.png，分辨率是32x32，這麼寫
.demo{
  background-image: url(images/icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) {
  .demo {
    background-image: url(images/icon@2x.png);
    background-size: 16px 16px; //這個也很關鍵--設置2倍圖爲1倍圖大小
  }
//或者
<img src="image-128.png" srcset="image-256.png 2x" />
//上面的代碼，就能實如今屏幕密度爲1x的狀況下加載image-128.png, 屏幕密度爲2x時加載image-256.png。

讓圖文不可複製

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

去除蘋果手機自帶樣式

/*強制去除表單自帶的樣式*/ 
input,button,select,textarea{outline:none;-webkit-appearance:none;}

/*強制去除textarea自帶的樣式*/
textarea{resize:none;-webkit-appearance:none;}

清除浮動，兼容ie6

.clearfix{
  zoom: 1;
}
.clearfix:after{
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

垂直水平居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

內容垂直居中

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

---

CSS3全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}

ie hack

selector { 
    property: value; /* 全部瀏覽器 */ 
    property: value\9; /* 全部IE瀏覽器 */ 
    property: value\0; /* IE8 */ 
    +property: value; /* IE7 */ 
    _property: value; /* IE6 */ 
    *property: value; /* IE6-7 */ 
}

使用ie最高版本內核渲染

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
//或者
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9">

---

兼容ie6的圓角

.t{
    width: 200px;
    border:3px solid;
    border-color: transparent transparent green;
}
.tcon{
    width: 206px;
    height: 50px;
    background-color: green;
}
.tb{
    width: 200px;
    border:3px solid;
    border-color: green transparent transparent;
}

<div class="tbox">
    <div class="t"></div>
    <div class="tcon"></div>
    <div class="tb"></div>
</div>

css省略號

//單行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//寬度不固定 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

自定義文本選中樣式

// 只能修改這兩個屬性 字體顏色 選中背景顏色
element::selection{
  color: green;
  background-color: pink;
}
element::-moz-selection{
  color: green;
  background-color: pink;
}

小三角

.triangle{
  /* 基礎樣式 */
  border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
 border-top-color: green;
}
/*上*/
.triangle.top{
 border-bottom-color: green;
}
/*左*/
.triangle.top{
 border-right-color: green;
}
/*右*/
.triangle.top{
 border-left-color: green;
}

鼠標手型

//通常狀況下，咱們但願在如下元素身上添加鼠標手型
a[href],
input[type='submit'],
input[type='image'],
input[type='button'],
label[for], 
select, 
button {
  cursor: pointer;
}

論文頁面的捲曲效果

ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}

double

.double {
    border-bottom: 20px solid blue;
    border-top: 60px double red;
    height: 20px;
    width: 120px;
}

border-color繼承color的顏色

/*border-color繼承color的顏色*/
.add{
    display: block;
    width: 200px;
    height: 200px;
    position: relative;
    transition: color .5s .1s;

    color: #ccc;
    border: 1px solid;
}
.add:before{
    content: '';
    border-top:10px solid;
    width: 90%;
    position: absolute;
    left: 5%;
    top: 95px;
}
.add:after{
    content: '';
    border-left:10px solid;
    height: 90%;
    position: absolute;
    left: 95px;
    top: 5%;
}
.add:hover{
    color:#f60;//一行實現顏色變化
}

移動端可點擊元素去處默認邊框

-webkit-tap-highlight-color: rgba(255,255,255,0);

屏蔽Webkit移動瀏覽器中元素高亮效果

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

給 「默認」 連接定義樣式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

逗號分隔列表

ul > li:not(:last-child)::after {
  content: ",";
}

使用負的 nth-child 能夠選擇 1 至 n 個元素。

li {
  display: none;
}
/* 選擇第 1 至第 3 個元素並顯示出來 */
li:nth-child(-n+3) {
  display: block;
}

//或者

/* 選擇第 1 至第 3 個元素並顯示出來 */
li:not(:nth-child(-n+3)) {
  display: none;
}

利用屬性選擇器來選擇空連接

a[href^="http"]:empty::before { 
    content: attr(href); 
}

設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行爲

/* 禁止長按連接與圖片彈出菜單 */
a, img { -webkit-touch-callout: none; } 

/* 禁止選中文本（如無文本選中需求，此爲必選項）*/
html, body { 
-webkit-user-select: none;  
user-select: none; 
}

改變placeholder的字體顏色大小

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

美化input框

/*在IE10+瀏覽器中, 使用css便可隱藏input文本輸入框右側的叉號*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*去除點擊出現輪廓顏色*/
  outline: none;
  /*padding已在重置樣式中去除，若是沒有去除，記得有padding哦*/    
}

美化select

/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox裏面的邊框是不同的，因此複寫了一下*/
  border: solid 1px #333;

  /*將默認的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側中間顯示小箭頭圖片*/
  background: url("小箭頭圖片路徑") no-repeat right center transparent;

  /*爲下拉小箭頭留出一點位置，避免被文字覆蓋*/
  padding-right: 14px;

  /*去除點擊出現輪廓顏色*/
  outline: none;
}