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) ") ";
  }
}