CSS小技巧

1.需要设计只能输入数字的输入框，input输入框当type为number时，后面总是有上下两个箭头，现在我们使用css设置使它消失，让他更美观

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

2.当我们制作页面时，会发现我们可以选中文字或图片，我们通过配置参数可以让他不进行选中

  div,span {
    user-select: none;
  }

对图片可以拖动的情况可以设置图片的属性draggable="false"来解决

<img
    class="dot-img"
    src="@/assets/dy/img/weather_station.png"
    @click="dotDialog('weather_station')"
    draggable="false"
    alt=""
/>

3.当我们要制作倾斜的元素效果时，比如

 这个时候我们通常会意识到要设置transform过渡属性中的旋转rotate，但效果明显做不到图片这样，这时候我们就需要用到perspective这个属性，且最重要的是这个属性必须设置在父级身上才生效

//父级样式设置
.wrapper {
  position: absolute;
  top: 10%;
  left: 40%;
  width: 300px;
  height: 500px;
  perspective: 900px;
}

//卡片样式设置
.container {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  transition: .5s all ease;
  transform: rotateX(60deg) scale(0.7);
  perspective: 900px;
  box-shadow: 0px 20px 50px #555;
  animation: entry 1s linear 1;
}

4.一行代码实现网页灰度

style="filter:grayscale(1);"

5.修改页面滚动条样式

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  background: #206a96;
  border-radius: 2px 2px 2px 2px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #64b8ea;
  border-radius: 2px 2px 2px 2px;
}

6. 清除输入框内阴影

在 iOS 上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样操作：

input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

7. 电话号码识别

iOS Safari ( Android 或其他浏览器不会) 会自动识别看起来像电话号码的数字，将其处理为电话号码链接，比如：

• 7位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11位数字，形如：13800138000

<!-- 关闭电话号码识别： -->
<meta name="format-detection" content="telephone=no" />

<!-- 开启电话功能： -->
<a href="tel:123456">123456</a>

<!-- 开启短信功能： -->
<a href="sms:123456">123456</a>

8. 邮箱地址的识别

在 Android （ iOS 不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。

<!-- 关闭邮箱地址识别： -->
<meta name="format-detection" content="email=no" />

<!-- 开启邮件发送： -->
<a mailto:>mobile@gmail.com">mobile@gmail.com</a>

后续更新中……