css技巧總結

看風景就發表於2017-10-29
CSS

1. contenteditable屬性的div的placeholder

<div class="input" contenteditable placeholder="請輸入文字"></div>
.input:empty::before {
  content: attr(placeholder);
}

2.沒有文字的a連結顯示連結

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

3. 偽元素生成邊框漸變

.box {
    margin: 80px 30px;
    width: 200px;
    height: 200px;
    position: relative;
    background: #fff;
    float: left;
}
.box:before {
    content: '';
    z-index: -1;
    position: absolute;
    width: 220px;
    height: 220px;
    top: -10px;
    left: -10px;
    background-image: linear-gradient(90deg, yellow, gold);
}

4. checkbox, radio美化

input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {  
    content: "";
    border: 1px solid #000;
    font-size: 11px;    
    line-height: 10px;
    margin: 0 5px 0 0;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: middle;
}
input[type=checkbox]:checked + label:before {  
    content: "\2713";
}

/*給核取方塊新增動畫效果*/
input[type=checkbox] + label:before {  
    content: "\2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {  
    color: #000;
}

/*給單選按鈕新增動畫效果*/
input[type=radio] + label:before {  
    content: "\26AB";
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 0;    
    transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {  
    font-size: 10px;   
}

5. table的th,td寬度設定無效解決方法

通常是由於table-layout設定為auto(瀏覽器預設值)導致的，td的寬度會根據內容的寬度來變化。將其設為fixed即可。

.table{
    table-layout:fiexd;
    width:100%;
}

 6.文字漸變

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

7.禁用滑鼠事件

用pointer-event來禁用事件，pointer-event屬性更像是一個JavaScript事件，利用該屬性，可以做如下的事情：
● 阻止任何點選動作的執行
● 使連結顯示為預設游標(cursor:default)
● 阻止觸發hover和active狀態
● 阻止JavaScript點選事件的觸發

//使用該類，任何點選事件將無效
.disabled { pointer-events: none; }

8.模糊文字

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

9.偽元素來列印a標籤的連結

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

 

相關文章