不常用的css属性总结， env，constant，attr函数，应用案例和技巧分析

最新推荐文章于 2025-05-14 11:04:37 发布

我有一棵树

最新推荐文章于 2025-05-14 11:04:37 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/qq_17335549/article/details/125329611

css 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了CSS中的env()和attr()函数。env()函数允许使用浏览器定义的环境变量作为CSS值，例如安全区域距离。attr()函数则可以从HTML元素中获取属性值并应用于CSS伪元素的内容。示例展示了如何利用这两个函数在不改变正文内容的情况下，在文章后添加批注文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. env()、constant()函数

类似于var的函数，将浏览器定义的环境变量值，插入css中
环境变量由浏览器设置
与自定义属性不同，env可以代替属性值或描述符的任何部分，被全局作用在文档中
safe-area-inset-top 安全区域距离上边边界距离

padding-bottom:env(safe-area-inset-top, 20px)

JELLY DESIGN | 京东零售官方设计共享平台JDR Design 隶属于京东零售集团，专注于无界零售下完美购物体验的设计探索与尝试，商业价值与用户体验的平衡。服务包括产品、营销、品牌、新媒体等体验及创新设计；同时将设计能力在组织内外部完成规模化的输出与赋能，形成独有的商业设计体系。https://jelly.jd.com/article/6006b1055b6c6a01506c87fd

2. attr()函数，获取 html某个属性值，设置给伪元素的content属性

理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的

attr - CSS（层叠样式表） | MDN

<!DOCTYPE html>
<html>
	<style>
		.box::before {
			content: attr(data-prefix);
		}
	</style>
</html>
<body>
	<div class="box" data-prefix="before ">hello world</div>
</body>

应用案例

在某一篇文章，正文后面增加一句【批注性质】的文字，要求：

不改变正文内容
复制文章，不要复制【批注性质】的文字

<!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>