CSS3样式效果收集

祈福qifu

已于 2023-11-29 11:25:07 修改

阅读量89

点赞数

分类专栏： CSS3 文章标签： css

于 2021-02-04 13:47:35 首次发布

本文链接：https://blog.csdn.net/m0_37566921/article/details/113641419

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文本两行显示，超出用省略号代替

.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

移动端1px像素线条效果

.bd__bottom {
  position: relative;
  &:before {
    content: '-'; /*oppo vivo 部分手机线条不显示的兼容处理*/
    color: transparent;
    height: 1px;
    width: 100%;      
    border-bottom:1px solid #ededed;
    -webkit-transform: scaleY(0.5);
    transform:scaleY(0.5);      
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

佛祖保佑注释

//
//                            _ooOoo_
//                           o8888888o
//                          88"  .  "88
//                          (|  -_-  |)
//                          O\   =   /O
//                        ____/`---'\____
//                      .'  \\|     |//  `.
//                     /  \\|||  :  |||//  \
//                    /  _||||| -:- |||||-  \
//                    |   | \\\  -  /// |   |
//                    | \_|  ''\---/''  |   |
//                    \  .-\__  `-`  ___/-. /
//                  ___`. .'  /--.--\  `. .'__
//               ."" '<  `.___\_<|>_/___.'  >'"".
//              | | :  `- \`.;`\ _ /`;.`/ - ` : | |
//              \  \ `-.   \_ __\ /__ _/   .-` /  /
//         ======`-.____`-.___\_____/___.-`____.-'======
//                            `=---='
//        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                      Buddha Bless, No Bug !
//                      佛祖保佑      永无BUG

未完，待续