CSS 宝典：常用的花样玩起来！

1. 图片旋转360度

transform: rotate(360deg);

这个样式可以将图片旋转360度，常用于创建旋转效果。

2. 去除scroll-view的滚动条

overflow: hidden;

这个样式可以去除scroll-view的滚动条，使内容在scroll-view中不可滚动。

3. 插槽的使用

插槽是一个用于在组件中插入内容的特殊元素。它允许你将组件的结构与内容分离，从而提高代码的可重用性和灵活性。

<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>

slot[name="header"] {
  background-color: #f0f0f0;
  padding: 10px;
}

slot[name="content"] {
  background-color: #ffffff;
  padding: 10px;
}

slot[name="footer"] {
  background-color: #f0f0f0;
  padding: 10px;
}

4. 让字体显示一行,超出隐藏并显示点点点

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

这个样式可以使字体显示一行，超出部分隐藏并显示点点点。

5. 显示二行,超出隐藏,显示点点点

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

这个样式可以使字体显示二行，超出部分隐藏并显示点点点。

6. 对多个插槽的使用

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

:slotted(header) {
  background-color: #f0f0f0;
  padding: 10px;
}

:slotted(content) {
  background-color: #ffffff;
  padding: 10px;
}

:slotted(footer) {
  background-color: #f0f0f0;
  padding: 10px;
}

7. 实现毛玻璃效果

background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);

这个样式可以实现毛玻璃效果，使背景模糊。

8. 设置100%区域

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

这个样式可以将元素设置为100%区域，覆盖整个屏幕。