首页 > TAG信息列表 > inset

css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配

使用苹果官方推出适配方案css函数env()、constant()来适配 苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？ env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-lef

优秀的动画效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device

css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配

使用苹果官方推出适配方案css函数env()、constant()来适配 苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？ env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-left：

css button 按压效果和内部阴影

重要属性： :active 选择器用于选择活动链接。 box-shadow: inset 将外部阴影 (outset) 改为内部阴影。 <style>> .button { overflow: hidden; height: 80px; background: #7fb1bf; cursor: pointer; co

移动端H5-iPhone安全距离适配

安全区域？ 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域： 也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档：Human Interface Guidelines - iPhoneX v

uniapp ios 底部安全距离设置

设置class  safe-padding .safe-padding { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } 底部view 设置 bottom bottom: var(--window-bottom);  结果如图    

【缅怀钱老】学习实现火箭发射效果

前言 昨天是钱学森钱老逝世十二周年的日子，钱学森老先生对我国两弹一星事业的贡献是巨大的，借本文献上阿包无限的敬仰之情。 五年归国路，十年两弹成。 每次提起钱老先生，我脑海中都会浮现出钱老先生面对陈赓将军询问我国可不可以搞导弹时，钱老先生那干脆、慷慨有力的回应：“中国人

给容器添加阴影

1、外阴影 .shadow-box{ -webkit-box-shadow:0px 0px 4px #ff0000; -moz-box-shadow:0px 0px 4px #ff0000; box-shadow:0px 0px 4px #ff0000; }   ****************************************************  分割线  **********************************

微信小程序安全区域

// 配置底部安全区域 page { //iOS 11 padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); //iOS 11.2+ padding-right: env(safe-area-inset-right); padding-

移动端兼容iphonex

1: 设置网页的头部标签（viewport-fit=cover"） <meta name="viewport" content="width=device-width, viewport-fit=cover"> 2:将页面主体设置在安全区域内（padding-bottom/bottom/margin-bottom） .footer{ padding-bottom: constant(safe-area-inset-bottom);

css处理ios刘海屏问题

.home{     padding-bottom:constant(safe-area-inset-bottom); //兼容IOS < 11.2     padding-bottom:env(safe-area-inset-bottom);//兼容IOS > 11.2 } ps：constant必须写在前面，env写在后面。 constant与env有4个预设变量： safe-area-inset-top //上方刘海 safe-area-inset

把页面主体内容限定在安全区内

padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); padding

vue页面模板(包含header,main,footer)-兼容iPhoneX顶部刘海和底部留白

页面分成header，main，footer 在header里面最外层加样式： padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); 在main内容部分要加上 .main { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padd

ipone移动端底部安全区域化适配

<template> <div class="c-fixed-bottom"> <!-- 空白占位 --> <div class="c-fixed-bottom__seat" /> <div class="c-fixed-bottom__positioner" :style="customStyle"> <slot>

CSS3/SVG clip-path路径剪裁遮罩属性简介

一、SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类，还有很重要的一个分支：SVG属性家族！ 所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。 比方说，之前介绍“SVG Sprites技术”时候提到的f

[CSS3] Apply Image Filter Effects With CSS

Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS filter property. Additionally, use an inset box-shadow to create a vignette effect as used by photographers. Learn how to remove each effect by using t

微信小程序吸底区域适配iPhone X

原文链接：微信小程序吸底区域适配iPhone X 微信小程序适配iPhone X主要针对fix定位到底部的区域，比如详情页或购物车底部的按钮栏，会与iPhone X的Home Indicator横条重叠，这样在点击下方按钮时很容易误触发手势操作，如下图： 旧方法 1. 获取设备信息 /** * 获取设备信息 * @returns {

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset; 值描述  h-shadow 必需。水平阴影的位置。允许负值。   v-shadow 必需。垂直阴影的位置。允许负值。   blur 可选。模糊距离。   spread 可选。阴影的尺寸。   color 可选。阴影的颜色。请参阅 CSS 颜色

h5适配iphone x底部兼容？

主要用到标签： 1 <div className="parent"> 2 <header></header> 3 <div className="content"></div> 4 <footer></footer> 5 </div> 然后我们要设置相应的css样式： 1 .parent{ 2 height:100vh; 3

box-shadow边框阴影

语法： box-shadow: h-shadow v-shadow blur spread color inset; 说明： h-shadow ：x-坐标值，阴影水平偏移量，允许负值，如果设为0，阴影就位于元素正后方，负值向左偏移，正值向右偏移 v-shadow：y-坐标值，阴影垂直偏移量，允许负值，负值向上偏移，正值向下偏移 blur：阴影的模糊程度，值越大，模糊面积越大

11种常用css样式之border学习

边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成; border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左

CSS阴影 box-shadow属性用法

box-shadow: 它可以设置一个或者多个下拉阴影的框 语法：box-shadow:h-shadow v-shadow blur spread color inset 注意：该属性把一个或者多个下拉阴影添加到框上，该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值，一个可选的颜色值和一个可选的inset关键字来规定。 属性参数说

关于 iphone刘海屏适配

默认刘海屏的webview是有安全区域的，加上viewport-fit=cover属性后webview会全屏，全屏后为了适配刘海屏加上安全区域 padding-top: 1rem;//android样式 padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);// i

js对象排序or数组排序（基于排序相同的属性之外再次排序其他的属性）

//对象排序 var obj = { 0:{name:'小红',age:'18',inset:'吃饭'}, 1:{name:'小狗',age:'16',inset:'游泳'}, 2:{name:'小黄',age:'14',inset:'睡觉'}, 3:{name:'小光',age:&#

VUE 超好看气泡进度条组件

超好看的气泡进度条, 已封装成组件. 二话不说先上图 ↓↓↓   一, 先将这张图片放入 assets 文件夹内 (因为是透明背景图片,所以用箭头框起来了) ↓↓↓ →← ↑↑↑   二, 在 components 文件夹内新建一个 progress-bar.vue 文件 Copy 下面这段代码进去 <template> <div cl