西瓜皮儿

特殊样式记录

2022/6/21

# 模糊背景

<body>
    <div class="bgc"><img src="https://coderhdy.com/assets/img/bgimg.jpg" alt=""></div>
    <div class="box">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
    <style>
        .bgc {
            position: absolute;
            height: 80vh;
            width: 100%;
            background-repeat: no-repeat;
            background-position: 50% 0;
            background-color: #fff;
            -webkit-filter: blur(50px);
            /* Chrome, Safari, Opera */
            filter: blur(50px);
            background-size: cover;
            overflow: hidden;
            z-index: -1;
        }

        .box {
            position: relative;
        }

    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# css滚动阴影
























 
 
 
 
 
 

 
 
 
 
 
 
 























<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            position: sticky;
            background: rgba(255, 255, 255, 0.9);
            top: 0;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            z-index: 1;
        }

        shadow::before {
            content: '';
            box-shadow: 0 0 15px 3px #333;
            position: fixed;
            width: 100%;
        }

        shadow::after {
            content: '';
            width: 100%;
            height: 15px;
            background: #fff;
            position: absolute;
        }

        ul {
            margin-top: 15px;
        }

        li {
            height: 100px;
            margin-bottom: 10px;
            background-color: rgb(255, 111, 111);
        }
    </style>

    <header>css头部滚动阴影</header>
    <shadow></shadow>
    <div>
        <ul>
            <li>1</li>
        </ul>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# button关闭点击阴影

  • 手机特有阴影效果
button {
    -webkit-tap-highlight-color: transparent;
　　-moz-tap-highlight-color:transparent;
　　outline: 0;
}

input {
    -webkit-appearance: none;
}
1
2
3
4
5
6
7
8
9

# 五角星

# 骨架屏

重点

  • 用某祖先节点类名控制整体的loading样式
  • background-position移动是盒子移动，背景图片不动，背景图片可以控制大小和repeat来制作重复效果

# JS获取样式

const width = getComputedStyle(e.target).getPropertyValue('width');
1

# form表单禁止跳转

<body>
    <form action="" onsubmit="return false">
        <input type="search">
        <input type="submit" value="submit">
    </form>
</body>
1
2
3
4
5
6

# 浏览器滚动条

// 滚动条
// 滚动条整体部分，其中的属性有width,height,background,border等。
body::-webkit-scrollbar {
  background: linear-gradient(to bottom, #a2d5ec 0%, #3e91b4 57.6px, #fff 57.6px, #fff 100%) !important;
}

// 滚动条里面可以拖动的滑块
body::-webkit-scrollbar-thumb {
}
// 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
body::-webkit-scrollbar-track {
  height: calc(100vh - 57.6px);
  margin-top: 57.6px;
}
// 内层轨道，需要注意的就是它会覆盖第三个属性的样式。
body::-webkit-scrollbar-track-piece {
}
//  滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
body::-webkit-scrollbar-button {}
// 边角，两个滚动条交汇处
body::-webkit-scrollbar-corner {}
// 两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）
body::-webkit-resizer {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 浏览器滚动条占位

  • 问题：局部滚动，出现滚动条，滚动条占位，会影响页面布局
  • 复现条件：
    • mac设置 -> 滚动条 -> 总是展示滚动条
/* 滚动 div 盒子 */
/* overflow: overlay firefox浏览器不生效，因此设置两个属性作为降级属性 */
div {
  overflow: auto;
  overflow-y: overlay;
}
1
2
3
4
5
6

# input-number隐藏按钮

<body>
  <input type="number" />
  <input type="number" class="special" />

  <style>
    input[type="number"].special::-webkit-inner-spin-button,
    input[type="number"].special::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"].special {
      -moz-appearance: textfield;
    }
  </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# input-search修改clear样式

input[type=search]::-webkit-search-cancel-button: {
  -webkit-appearance: none,
  position: relative,
  height: 1rem,
  width: 1rem,
  borderRadius: 50%,
  backgroundSize: 100% 100%,
  backgroundImage: url("a.svg"),
},
input[type=search]::-ms-clear: {
  appearance: none,
  position: relative,
  height: 1rem,
  width: 1rem,
  borderRadius: 50%,
  backgroundSize: 100% 100%,
  backgroundImage: url("a.svg"),
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# css节流按钮

<body>
  <button>节流按钮</button>

  <script>
    const btn = document.querySelector("button");
    btn.addEventListener("click", () => {
      console.log("11111111");
    });
  </script>

  <style>
    button {
      animation: throttle 1s forwards step-end;
    }
    button:active {
      animation: none;
    }
    @keyframes throttle {
      from {
        color: red;
        pointer-events: none;
      }
      to {
        color: black;
        pointer-events: auto;
      }
    }
  </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# IOS14滚动白屏

  • bug：ios14.0某些滚动会白屏
  • 可滚动框加一行属性
-webkit-overflow-scrolling: touch;
1

# 手机点击元素背景色

  • 关闭手机下元素被点击的黑色阴影
input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0),
}
1
2
3

# 手机search按钮

  • 手机键盘的search按钮，keyCode是enter
  1. 用form包裹，且得有action参数
  2. input的type是search
<form action="">
  <input type="search" placeholder="" placeholder="请输入搜索" />
</form>
1
2
3

# 事件穿透























 

















<body>
  <div class="under"></div>
  <div class="upper"></div>

  <style>
    .under {
      position: absolute;
      left: 0;
      top: 0;
      height: 100px;
      width: 100px;
      background-color: #f00;
    }
    .upper {
      position: absolute;
      left: 30px;
      top: 30px;
      height: 200px;
      width: 200px;
      opacity: 0.5;
      background-color: rgb(97, 106, 97);
      z-index: 999;
      pointer-events: none;
    }
  </style>

  <script>
    const under = document.querySelector(".under");
    const upper = document.querySelector(".upper");

    under.addEventListener("click", () => {
      alert("底下的元素被点击");
    });

    upper.addEventListener("click", () => {
      alert("顶部被点击");
    });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 固定屏幕宽高比

无论屏幕大小，内容都以固定比例展现，且子内容同比缩小放大

  • 最外层容器不能是body
  • 最外层容器定位为fixed
const html = document.querySelector("html");
const body = document.querySelector("body");

// container 比例
const rateWidth = 600;
const rateHeight = 600;

body.style.padding = 0;
body.style.margin = 0;
html.style.height = `${rateHeight}px`;
html.style.width = `${rateWidth}px`;
html.style.padding = 0;
html.style.position = "fixed";
html.style.left = "50%";
html.style.top = "50%";
html.style.transform = "scale(1) translate(-50%, -50%)";
html.style.transformOrigin = "0% 0%";

const onResize = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  const wRate = w / rateWidth;
  const hRate = h / rateHeight;
  const scale = wRate > hRate ? hRate : wRate;
  html.style.transform = `scale(${scale}) translate(-50%, -50%)`;
};

window.addEventListener("resize", onResize);
onResize();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# filter模糊兼容现代浏览器写法

filter: blur(4px);
-webkit-filter: blur(4px);
-webkit-backdrop-filter:blur(4px);
backdrop-filter: blur(4px);
1
2
3
4
上次更新: 11/1/2024

form表单