css日常知识总结

 

1，自定义文本选中样式

::selection{
   color:#9400D3;
   background:#A9A9A9;
}
::-moz-selection{
    color:#9400D3;
    background:#A9A9A9;
}

 

2，金属质感的文字

<p><span class="cover"></span>金属质感文字</p>

css

p{
 color:white;background:black;
 font-weight:bold;font-size:30px;
 position:relative;
}
  span.cover{
      width:100%;height:100%;position:absolute;
      background:linear-gradient(to bottom,black 0%,transparent 50%,black);
      opacity:0.5;
}

3，图片去色，图片变成黑白色

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); 
filter: gray;

 

4：高度不确定的div/图片，垂直居中？

<!-- 主要思想，是设置元素的display值，让其像table中的元素一样显示 -->
<div class="bigerCon">
    <div class="container">
        <div class="center">
            这里的内容区域将会居中
        </div>
    </div>
</div>

.bigerCon{
    width: 100%;
    height: 100%;
    display: table;
    background-color: #454540;
    _position:relative;
}
.container{
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    _position:absolute; 
    _top:50%; 
    _left:50%;
}
        
.center{
    width: 300px;
    display: inline-block;
    background-color: red;
    _position:relative; 
    _top:-50%; 
    _left:-50%;
}

 

5：在table》td中overflow失效？

tabler{
    table-layout:fixed
}
td{
    overflow:hidden;
}