ios系统下无法正常渲染元素
原因:iOS下的safari中有默认的按钮样式
解决代码
-webkit-appearance: none;
~~~~
css变量,var() 与 :root
:root
:root选择器 表示文档根元素 里边的属性为全局属性
css变量
声明变量要给变量名前加两根连词线 (–)
:root {
--foo: #fff;
--header-color: #fff;
--Header-Color: #fff;
}
变量名大小写敏感 --header-color与 --Header-Color是两个不同的变量
var()函数
a {
color: var(--foo, #fff);
}
var()函数有两个参数,第二个参数表示变量的默认值。如果变量不存在,使用默认值。
变量值的类型
字符串
可以直接连用
--bar: 'hello';
-foo: var(--bar)'world';
数值
数值与单位直接写在一起是无效的,必须使用 calc() 函数。
/*无效的使用*/
a {
--gap: 20;
margin-top: var(--gap)px;
}
/*正确使用*/
a {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
如果变量值带有单位,就不能写成字符串
/*无效*/
a {
-foo: '20px';
font-size: var(--foo);
}
/*有效*/
a {
-foo: 20px;
font-size: var(--foo);
}
兼容性处理
对于不支持css变量的浏览器,采用下面的写法
a {
color: #fff;
color: var(--primary);
}
使用 @support 进行检测
@support ((--primary: #fff)) {
}
@support ( not (--primary: #fff)) {
}