一些常用css

Pluto_fan

已于 2024-07-11 20:09:09 修改

阅读量197

点赞数 4

文章标签： css 前端

于 2024-07-11 09:38:11 首次发布

本文链接：https://blog.csdn.net/Pluto_fxy/article/details/140330964

版权

1. 文本显示超出省略号

1.1 单行

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

1.2 多行

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 3em;
line-height: 1.5em;
height: 3em;

2. 渐变边框

    .active {
      box-shadow: unset;
      border-radius: 40px 40px 40px 40px;
      color: #16181d;
      position: relative;
      background: #f1f5f9;
      transform-style: preserve-3d;
      &::after {
        content: "";
        width: 276px;
        height: 286px;
        box-shadow: -2px -2px 2px 0px #ffffff, 2px 2px 2px 0px #c9d9e8;
        background: linear-gradient(
          181deg,
          rgb(45, 141, 254),
          rgb(108, 203, 244)
        );
        position: absolute;
        top: -3px;
        left: -3px;
        border-radius: 40px;
        transform: translateZ(-10px);
      }