首页 > Web开发 > 详细

好用的6个css方法

时间:2019-02-28 10:27:44      阅读:113      评论:0      收藏:0      [点我收藏+]

1. 黑白图像

img {
    filter: grayscale(100%);
}

 

2. 使用 :not() 除它之外的其他元素

.nav li:not(:last-child) {
    border-right: 1px solid #333;
}

 

3. 所有一切都垂直居中

html, body {
    height: 100%;
    margin: 0;
}
body {
    align-items: center;
    display: flex;
}

 

4. 表格单元格等宽

.calendar {
    table-layout: fixed;
}

 

5. 文本渐变

h1{
    position: relative;
}
h1:after{
    content: ‘与h1内容相同文字‘;
    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)));
}

 

6. 禁用鼠标事件

.disabled { 
    pointer-events: none; 
}

 

好用的6个css方法

原文:https://www.cnblogs.com/zhaozhou/p/10448245.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!