设置边框渐变色和是否显示滚动条

最新推荐文章于 2023-10-15 15:37:51 发布

weixin_48112768

最新推荐文章于 2023-10-15 15:37:51 发布

阅读量110

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_48112768/article/details/132818007

版权

文章讲述了如何使用CSS代码实现`.filter-all`类中的元素在水平方向上的弹性布局，同时隐藏默认滚动条，并为`.filter-btn`按钮添加了渐变边框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      .filter-all {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-right: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: 8px;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .filter-btn {
        padding-left: 10px;
        border-left: 1px solid #ccc;
        border-image: linear-gradient(180deg, rgba(237, 237, 237, 0.00) 0%, #CCCCCC 26%, #CCCCCC 80%, rgba(204, 204, 204, 0.00) 100%);
        border-image-slice: 1;
      }