CSS函数大全（四）：杂项和未来
本系列目标是做一个css函数完全指南，将尽可能罗列css中所有的函数及其用法，当需要使用或者理解某个css函数的时候，只要来这里寻找就可以了。
杂项
url
最常用的函数之一，表示一个文件地址。可以是相对路径、绝对路径或base64，或者一个svg的id
这个函数可用于background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path,@counter-style/symbol和@font-face中的src
offset-path: url(#path); mask-image: url("masks.svg#mask1"); cursor: url(pointer.cur), pointer; 复制代码attr
用来获取选择到的元素的某一HTML属性值。
<style> div::after { content: "----" attr(data-extra) } </style> <body> <div data-extra="lalalla">test</div> </body> 复制代码注意：
attr()理论上能用于所有的CSS属性，但目前支持的仅有伪元素的content属性它的高级语法
attr( attribute-name <type-or-unit>? [, <fallback> ]? ),目前也没有浏览器支持。
var
css变量变量
:root { --size:100px; --color: antiquewhite; --bg: tomato; } #container { width: var(--size); height: var(--size); color: var(--color); background-color:var(--bg) ; } <div id="container">text</div> 复制代码自适应图片 image-set()
image-set()函数是一种让浏览器从给定集合中选择最合适的CSS图像的方法。
background-image: image-set( "cat.png" 1x,"cat-2x.png" 2x,"cat-print.png" 600dpi); 复制代码
在普通屏幕上会使用cat.png，在Retina屏幕上使用cat-2x.png，在更高分辨率的屏幕上使用cat-print.png。 关于响应式图片可以参考响应式图片
shadow dom中的::slotted()
这也是一个伪类，代表的是自定义元素传过来的slot：
<span slot="person-age">Immortal</span> ::slotted(span) {font-weight:bold; color: gray; font-family: sans-serif; } 复制代码外部传过来的span元素会被应用该样式。
完整demo：
<person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details> <template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> <ul> <li> <slot name="person-age">AGE MISSING</slot> </li> <li> <slot name="person-occupation">OCCUPATION MISSING</slot> </li> </ul> </div> </template> <script> customElements.define('person-details', class extends HTMLElement { constructor() { super(); let template = document.getElementById('person-template'); let templateContent = template.content; const shadowRoot = this.attachShadow({ mode: 'open' }); let style = document.createElement('style'); style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) {font-weight:bold; color: gray; font-family: sans-serif; } '; shadowRoot.appendChild(style); shadowRoot.appendChild(templateContent.cloneNode(true)); } }) </script> 复制代码element
目前只有Firefox实现了。
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> <p>This box uses the element with the #myBackground1 ID as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> </div> </div> 复制代码
env
将用户代理定义的环境变量值插入你的 CSS 中。
最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } 复制代码counter 和 counters
counter可以获取代表计数器当前值的字符串，counters可以获取嵌套计数器的当前代表值。
ol { counter-reset: listCounter; } li { counter-increment: listCounter; } li::after { content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; } 复制代码未来
css的函数还在发展中，下面的特性有些有部分浏览器已经实现了，有些还在w3c讨论中。
cross-fade()
可将多张图片以一定的透明度混合。这个函数新老语法已经不一致了。
已经实现的老版语法的demo如下：
.crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('br.png'), url('tr.png'), 75%); background-image: cross-fade( url('br.png'), url('tr.png'), 75%); } 复制代码dir()
设置文字书写方向，只有Firefox实现了。
has()
尚无浏览器实现
/* 选择任何直接包含 <img> 子元素的 <a> */ /* 注意，目前还没有任何浏览器支持此方法 */ /* 此伪类也未计划投入样式表中使用 */ var test = document.querySelector('a:has(> img)'); 复制代码数学函数
正弦：
sin()余弦：
cos()切线：
tan()反余弦：
acos()反正弦：
asin()反正切：
atan()反正切：
atan2()平方根：
sqrt()参数平方和的平方根：
hypot()幂函数：
pow()
:host() 和 :host-context()
在shadow dom中使用
/* 选择阴影根元素，仅当它与选择器参数匹配 如：<context-span>Chris Mills</context-span> */ :host(.footer) { font-weight: bold; } /* 选择了一个 shadow root host, 当且仅当这个 shadow root host 是括号中选择器参数(h1)的后代 如： <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> */ :host-context(h1) { font-weight: bold; } 复制代码:nth-col() 和 :nth-last-col()
在网格布局中使用，定义某一/些列
:nth-col(odd) { background-color: pink; } 复制代码symbols()
伪原创工具 SEO网站优化 https://www.237it.com/
定义计数器样式,只有Firefox实现了
ol { list-style: symbols(cyclic "*" "†" "‡"); }
作者：布列瑟农的星空
链接：https://juejin.cn/post/7035216237357432840