滋溜鹿博客

Appearance

大纲

div 溢出用省略号代替 ​

css
/* postcss 主要用到 */
.box {
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis;
  width: 600px;
  & div {
    display: inline-block;
  }
  & div + div {
    margin-left: 20px;
  }
}
1
2
3
4

总结 ​

我们了解到了元素只有完全能展示的时候才会展现，不然就会被裁剪

其他裁剪: clip-path ​

css 裁剪

html
<div class="g-container">
  <div class="g-content">
    <div class="g-filter"></div>
  </div>
</div>

<div class="g-container">
  <div class="g-content">
    <div class="g-filter"></div>
  </div>
</div>

<style>
  /* https://codepen.io/Chokcoco/pen/JjroBPo */
  .g-container {
    position: relative;
    width: 300px;
    height: 100px;
    margin: auto;

    & .g-content {
      height: 100px;
      filter: contrast(20);
      background-color: white;
      overflow: hidden;

      & .g-filter {
        filter: blur(10px);
        height: 100px;
        background: radial-gradient(
          circle at 50% -10px,
          transparent 0,
          transparent 29px,
          #000 40px,
          #000
        );
      }
    }
  }

  .g-container:nth-child(2) {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      background: radial-gradient(
        circle at 50% -10px,
        transparent 0,
        transparent 60px,
        #000 60px,
        #000 0
      );
    }
  }
</style>

Last updated: