CSS相关自用

目录

1.元素不响应点击、点击穿透

2.目录布局

3.文字描边

4.渐变圆角边框-渐变文字

5.悬浮按钮/图截停

---

1.元素不响应点击、点击穿透

.decoration{
  pointer-events: none; 
}

pointer-events: none; 是一个 CSS 属性，它的作用是让元素不响应鼠标或触摸事件。设置为 none 后，该元素会像“不可点击”一样，鼠标事件会直接穿过该元素，触发它后面的元素。

常见用途

1. 禁用点击事件： 当需要让某些元素不可交互（例如按钮、链接等），但又不想通过 disabled 属性或隐藏元素时，可以使用 pointer-events: none;。

2. 透明背景点击穿透： 在某些情况下，你可能希望让一个透明的覆盖层允许点击穿透到下面的元素；可以用于装饰性元素（如图标、动画元素）上，让这些元素不会阻碍鼠标操作。

注意事项

1. 子元素也会受影响： 如果对父元素应用了 pointer-events: none;，其子元素也无法接收任何鼠标事件。

2. 恢复交互： 如果需要恢复元素的交互，可以设置为 pointer-events: auto;，这是默认值。

2.目录布局

html-js-css：中间的点线用边框+flex1布局

<div v-for="(item, index) in taskList" :key="item.id" class="task-item">
  <span class="task-item-text">{{ index + 1 }}.{{ item.text }}</span>
  <span class="task-item-line"></span>
  <img v-if="!item.isComplete" src="task-finish-btn.png"  />
  <img v-else src="task-complete-btn.png" />
</div>

computed: {
taskList() {
  let { store_reservation,..., invite_number } = this.userInfo
  return [
    {
      id: 1,
      text: '商店預約',
      isComplete: store_reservation,
      line: '·····'
    },
    //......
    {
      key: 'inviteOne',
      text: `邀請好友 (${invite_number || 0}/3)`,
      isComplete: invite_number >= 3,
      line: '·····'
    }
  ]
}
}

.task-item {
  white-space: nowrap;
  &:not(:last-child) {
    padding-bottom: 18px;
  }
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  .task-item-line {
    border-bottom: 3px dashed #4a6e97;
    height: 0;
    flex: 1;
  }
}

3.文字描边

• text-shadow可以制作文字发光，文字阴影效果；多个text-shadow重叠制作文字描边效果；向外描边。（text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];）

• -webkit-text-stroke是最清晰的描边效果，但兼容性较差仅支持 Webkit 内核；会占用原本字体的宽度，向内描边。

<template>
<div class="text">
  <div class="text-shadow">文字阴影</div>
  <div class="text-border">文字描边text-shadow</div>
  <div class="text-inner">文字描边-webkit-text-stroke</div>
</div>
</template>

<style lang="scss" scoped>
.text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.text-shadow {
  text-shadow: 0 0 5px #333;
}
.text-border {
  text-shadow: 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff,
    0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff, 0 0 1px #409eff,
    0 0 1px #409eff;
}
.text-inner {
  -webkit-text-stroke: 1px red;
}
</style>

4.渐变圆角边框-渐变文字

.box {
  border-radius: 20px;
  border: 10px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #8f41e9, #578a
}

缺点：必须设置盒子背景颜色，不能transparent。

	第一个背景（内）	第二个背景（外）
background-clip背景显示的范围	padding及以内	border及以内
background-origin决定背景图片的起点	padding及以内	border及以内
background-image	必须设置非transparent颜色	渐变色linear-gradient()

.box {
  font-size: 50px;
  font-weight: bold;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #f512b1, #11eedc);
}

5.悬浮按钮/图截停

效果	悬浮图停在底栏a处	停在距离文档底部x处	被底栏覆盖
css	bottom: a px;	bottom: a px;	z-index <= bottom的即可
js	if (...)，	if (window.scrollY >= document.body.scrollHeight - window.innerHeight - bottomHeight - b )	不用监听
条件	.fixed { 不写bottom属性}	bottomHeight+a+b=x；.fixed {bottom: a+b px !important;}	不添加.fixed

<div class="home">
  <div class="main">
    <div class="slide-bottom">这是悬浮图/按钮<br><img src="chips.png" /></div>
  </div>
  <div class="bottom">这是bottom栏<img src="cream.png" /></div>
</div>

.main {
  position: relative;
  z-index: 1;
  .slide-bottom {
    position: fixed;
    bottom: 100px; // 悬浮时距离屏幕底的距离
    z-index: 2;
  }
}
.bottom {
  position: relative;
  height: 225px;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fixed {
  position: absolute !important;
  z-index: 4 !important;
}

mounted() {
  window.addEventListener('scroll', () => {
    const slideBottom = document.querySelector('.slide-bottom')
    const bottomHeight = document.querySelector('.bottom').offsetHeight
    // window.scrollY 滚动条在Y轴的滚动距离
    // document.body.scrollHeight 文档的总高度
    // window.innerHeight 浏览器窗口的高度
    // bottomHeight 底部栏的高度
    if (window.scrollY >= document.body.scrollHeight - window.innerHeight - bottomHeight) {
      slideBottom.classList.add('fixed')
    } else {
      slideBottom.classList.remove('fixed')
    }
  })
},