css样式

一条小码虫

已于 2024-07-17 18:25:20 修改

阅读量287

点赞数

文章标签： css 前端微信小程序

于 2023-08-15 17:18:23 首次发布

本文链接：https://blog.youkuaiyun.com/xirunxiang369/article/details/130686789

版权

多行显示省略号

{
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

css不计算边距距离

{
box-sizing: border-box;
}

裁剪路径 clip-path

//三角形
{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

这个网站可以帮助我们裁剪各种想要的图形CSS3 剪贴路径（Clip-path）在线生成器 | 踏得网 (techbrood.com)

隐藏数字输入框的箭头

::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
    -moz-appearance: textfield;
}

等比缩放盒子宽高（grid-template-columns)

//html
  <div class="container">
    <div class="item">Column 1</div>
    <div class="item">Column 2</div>
    <div class="item">Column 3</div>
    <div class="item">Column 4</div>
    <div class="item">Column 5</div>
    <div class="item">Column 6</div>
    <div class="item">Column 7</div>
    ...
  </div>
//css
    .container {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* 均分为几列 */
      gap: 15px; /* 列之间的间隔 */
      /* 不设置行间距 */
      row-gap: 0;
      width: 500px;
      float: right;
      padding: 10px;
    }
    .item {
      border: 1px solid #ccc;
      //宽高比例  按需求调整 宽/高
      aspect-ratio: 1 / 1.3;
      box-sizing: border-box;
    }

效果