一月 2025 - SKILL.NULL

env(safe-area-inset-bottom) 兼容写法

@supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。

例：

@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {

.your-dom {

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

@supports not (

(padding-bottom: env(safe-area-inset-bottom)) or

(padding-bottom: constant(safe-area-inset-bottom))

) {

.your-dom {

padding-bottom: 20px;

}

2025-10-14by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(1654)评论(0)

一、

&::after {

content: "";

position: absolute;

top: -50%;

bottom: -50%;

left: -50%;

right: -50%;

border: 1px solid #e9e9e9;

border-radius: 2px;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

二、

&::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 200%;

height: 200%;

transform-origin: 0 0;

border-width: 1px;

border-style: solid;

border-radius: 50%;

-webkit-transform: scale(0.5);

transform: scale(0.5);

box-sizing: border-box;

}

2025-07-31by SKILLNULL HTML&CSS, 其他阅读(1335)评论(0)