常用CSS整理

美化滚动条

(只兼容 chrome 浏览器)

/* 覆盖默认滚动条样式 */ ::-webkit-scrollbar { width: 16px; height: 16px; /*background-color: #ddd;*/ } /*滑块*/ ::-webkit-scrollbar-thumb { background-color: #ccc; border: 4px solid transparent; border-radius: 8px; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #999; } /*滑道*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #ddd; }

移动端1px边框

  • 上边框
.border_top { position: relative; } .border_top::after { display: block; content: ""; width: 100%; height: 1px; position: absolute; left: 0; top: 0; background-color: #999; transform: scaleY(0.5); }
  • 下边框
.border_bottom { position: relative; } .border_bottom::after { display: block; content: ""; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background-color: #999; transform: scaleY(0.5); }
  • 左边框
.border_left { position: relative; } .border_left::after { display: block; content: ""; width: 1px; height: 100%; position: absolute; left: 0; top: 0; background-color: #999; transform: scaleX(0.5); }
  • 右边框
.border_right { position: relative; } .border_right::after { display: block; content: ""; width: 1px; height: 100%; position: absolute; right: 0; top: 0; background-color: #999; transform: scaleX(0.5); }
  • 带圆角的边框
.border_r4 { position: relative; border-radius: 4px; } .border_r4::after { position: absolute; content: ""; position: absolute; left: -50%; right: -50%; top: -50%; bottom: -50%; border: 1px solid #999; transform-origin: 50% 50% 0; transform: scale(0.5); border-radius: 8px; }

iphonex和iphone11等手机的安全区域

iOS11 新增特性,Webkit 的一个 CSS 函数,用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离 – 不被小黑条遮挡的安全距离

env()必须配合 viewport-fit=cover 使用!

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
.safe_bottom { padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ }

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: