关于一些css技巧实际应用扩展

最新推荐文章于 2024-01-03 12:00:00 发布

zhaoshuang1010

最新推荐文章于 2024-01-03 12:00:00 发布

阅读量394

点赞数

文章标签： css3 一些技巧

本文链接：https://blog.csdn.net/zhaoshuang1010/article/details/52353317

版权

1.单行多行文字超出省略号

多行：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;

单行：
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2.垂直居中

#parent {display: table}
#child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

//css3
.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

3跨浏览器透明度

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

4.placeholder 不垂直居中

 line-height: normal;
    
    input::-webkit-input-placeholder { /* WebKit browsers */
      line-height: 1.5em;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      line-height: 1.5em;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      line-height: 1.5em;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+ */
      line-height: 1.5em;
    }