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