移动页面100vh问题

最近在写移动端页面遇到一个问题,就是写高度100vh时底部有元素没有显示(ios Safari),搜了一下,大概是移动设备浏览器中100vh是包含了顶栏和底栏的高度

相关解释是,这样设计是为了......

Safari contenteditable focus

问题:safari下contenteditable的div没法获得焦点

解决:参考

safari默认的user-select值为none

[contenteditable] {

-......

CSS属性生成工具

参考:

box-shadow

生成平滑分层的阴影

border-radius

还有对应的cli工具

贝塞尔曲线

动画编辑应......

悬停显示滚动条

利用CSS mask-image 属性给元素添加遮罩,遮罩黑色部分下的内容会显示,而留白的17像素宽的部分会被遮住,使用transition改变遮罩位置时出现淡入淡出的效果

.content {

......

媒体查询Media Query

媒体查询允许开发者测试和查询用户代理或设备设置的属性,依据不同的匹配条件改变外观展示或者行为。媒体查询最常见的应用在于响应式设计上。

使用在CSS中使用媒体查询

css中使用@media at-......

CSS自定义属性实现过渡效果

注册自定义属性

JavaScript的CSS.registerProperty()

可以定义属性的名称,语法,默认值,是否可继承

window.CSS.registerProperty({

n......

Style Input Range

input[type=range]:focus {outline: none;}@media screen and (-webkit-min-device-pixel-ratio:0) { input......