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/图片,垂直居中?
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 主要思想,是设置元素的display值,让其像table中的元素一样显示 --> <div class="bigerCon"> <div class="container"> <div class="center"> 这里的内容区域将会居中 </div> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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; }