1. env()、constant()函数
- 类似于var的函数,将浏览器定义的环境变量值,插入css中
- 环境变量由浏览器设置
- 与自定义属性不同,env可以代替属性值或描述符的任何部分,被全局作用在文档中
- safe-area-inset-top 安全区域距离上边边界距离
padding-bottom:env(safe-area-inset-top, 20px)
2. attr()函数,获取 html某个属性值,设置给伪元素的content属性
理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性,其他的属性和高级特性目前是实验性的
<!DOCTYPE html>
<html>
<style>
.box::before {
content: attr(data-prefix);
}
</style>
</html>
<body>
<div class="box" data-prefix="before ">hello world</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/4cc28fd495b66a2a6f8715952ee4b5d3.png)
应用案例
在某一篇文章,正文后面增加一句【批注性质】的文字,要求:
- 不改变正文内容
- 复制文章,不要复制【批注性质】的文字
<!DOCTYPE html>
<html>
<style>
.article::after {
color: red;
content: attr(data-prefix);
}
</style>
</html>
<body>
<div class="article" data-prefix="--The Little Prince">
Once when I was six years old,
I saw a magnificent picture in a book,
called True Stories from Nature,
about the primeval forest.
It was a picture of a boa constrictor in the act of swallowing an animal
</div>
</body>