# 新的 CSS 伪类函数 :is() 和 :where()
## :is()
/* 旧的写法 */
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {color: hotpink;
}/* 新的写法&＃xff1a;伪类 &＃xff1a;is */
:is(h1,h2,h3,h4,h5,h6) > b {color: hotpink;
}
## :where()
:where() 伪类函数与:is()功能相同&＃xff0c;仅仅选择器权重不同
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {color: hotpink;
}/* in the middle */
article :is(header,footer) > p {color: gray;
}/* at the end */
.dark-theme :where(button,a) {color: rebeccapurple;
}/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {color: rebeccapurple;
}/* stacked */
:is(h1,h2):where(.hero,.subtitle) {text-transform: uppercase;
}/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {font-weight: 900;
}
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
[注意]IE浏览器不支持&＃xff0c;webkit内核浏览器需添加-webkit-前缀
fill-available
表示撑满可用空间&＃xff1a;
例 width:-webkit-fill-available;
登高布局&＃xff1a;height:-webkit-fill-available;
CSS中width:fill-available和width:100%的区别&＃xff1f;
区别:一旦跟padding/margin结合一起使用的时候&＃xff0c;width:100%会撑破布局&＃xff0c;而width:fill-available却不会。
fit-content
将元素宽度收缩为内容宽度
width:fit-content可以实现元素收缩效果的同时&＃xff0c;保持原本的block水平状态&＃xff0c;于是&＃xff0c;就可以直接使用margin:auto实现元素向内自适应同时的居中效果了
类似地&＃xff0c;高度也有此特性&＃xff0c;但不常用
div{width:-webkit-fit-content;margin:auto;
}
min-content
width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
max-content
width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本&＃xff0c;则相当于文本不换行
min-block-size
min-block-size:length| percentage| auto| none| min-content| max-content| fit-content| inherit| initial| unset;
CSS中的min-block-size属性用于创建元素的最小水平或垂直大小。如果写入方向为水平&＃xff0c;则min-block-size等效于min-height属性&＃xff0c;如果写入方向为垂直模式&＃xff0c;则等于min-width属性。
- length:它设置以px&＃xff0c;cm&＃xff0c;pt等为单位的固定值。也可以使用负值。其默认值为0px。
- 百分比(&＃xff05;)&＃xff1a;它与长度相同&＃xff0c;但是大小是根据窗口大小的百分比设置的。
- auto:当需要浏览器确定block-size时使用。
- none:当您不想限制包装盒的尺寸时使用。
- max-content:当您在包装盒尺寸上首选min-width时使用。
- min-content:当您在包装盒尺寸上首选min-width时使用。
- fit-content:当您在包装盒尺寸上首选exact-width时使用。
- initial:它用于将min-block-size属性的值设置为其默认值。
- inherit:当需要该元素从其父元素继承min-block-size属性时使用。
- unset:用于取消设置默认的mix-block-size。
css :root 和var()
非IE及ie8及以上浏览器都支持&＃xff0c;在:root中声明相当于全局属性&＃xff0c;只要当前页面引用了:root segment所在文件&＃xff0c;都可以使用var()来引用
:root {--main-bg-color: pink;
}body {background-color: var(--main-bg-color);
}
常规css
filter(滤镜)(通常是![]()
)
点击该处查看各个参数的效果
filter 属性定义了元素(通常是![]()
)的可视效果(例如&＃xff1a;模糊与饱和度)。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
| Filter | 描述 |
|---|
| none | 默认值&＃xff0c;没有效果。 |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差&＃xff0c;或者是屏幕上以多少像素融在一起&＃xff0c; 所以值越大越模糊&＃xff1b;如果没有设定值&＃xff0c;则默认是0&＃xff1b;这个参数可设置css长度值&＃xff0c;但不接受百分比值。 |
| brightness(%) | 给图片应用一种线性乘法&＃xff0c;使其看起来更亮或更暗。如果值是0%&＃xff0c;图像会全黑。值是100%&＃xff0c;则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的&＃xff0c;图像会比原来更亮。如果没有设定值&＃xff0c;默认是1。 |
| contrast(%) | 调整图像的对比度。值是0%的话&＃xff0c;图像会全黑。值是100%&＃xff0c;图像不变。值可以超过100%&＃xff0c;意味着会运用更低的对比。若没有设置值&＃xff0c;默认是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面&＃xff0c;可以有模糊度的&＃xff0c;可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值&＃xff0c;除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似&＃xff1b;不同之处在于&＃xff0c;通过滤镜&＃xff0c;一些浏览器为了更好的性能会提供硬件加速。参数如下&＃xff1a; (必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or &＃xff0c;会有模糊效果).
(可选)这是第三个code>值. 值越大&＃xff0c;越模糊&＃xff0c;则阴影会变得更大更淡.不允许负值 若未设定&＃xff0c;默认是0 (则阴影的边界很锐利).
(可选)这是第四个 值. 正值会使阴影扩张和变大&＃xff0c;负值会是阴影缩小.若未设定&＃xff0c;默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度&＃xff0c;如果加了也不会渲染。
(可选)查看 该值可能的关键字和标记。若未设定&＃xff0c;颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中&＃xff0c; 会应用colorcolor属性的值。另外, 如果颜色值省略&＃xff0c;WebKit中阴影是透明的。
|
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像&＃xff0c;值为0%图像无变化。值在0%到100%之间&＃xff0c;则是效果的线性乘子。若未设置&＃xff0c;值默认是0&＃xff1b; |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg&＃xff0c;则图像无变化。若值未设置&＃xff0c;默认值是0deg。该值虽然没有最大值&＃xff0c;超过360deg的值相当于又绕一圈。 |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间&＃xff0c;则是效果的线性乘子。 若值未设置&＃xff0c;值默认是0。比如《svg》是白色的 filter: invert(1);显示为黑色 |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明&＃xff0c;值为100%则图像无变化。值在0%和100%之间&＃xff0c;则是效果的线性乘子&＃xff0c;也相当于图像样本乘以数量。 若值未设置&＃xff0c;值默认是1。该函数与已有的opacity属性很相似&＃xff0c;不同之处在于通过filter&＃xff0c;一些浏览器为了提升性能会提供硬件加速。 |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和&＃xff0c;值为100%则图像无变化。其他值&＃xff0c;则是效果的线性乘子。超过100%的值是允许的&＃xff0c;则有更高的饱和度。 若值未设置&＃xff0c;值默认是1。 |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的&＃xff0c;值为0%图像无变化。值在0%到100%之间&＃xff0c;则是效果的线性乘子。若未设置&＃xff0c;值默认是0&＃xff1b; |
| url() | URL函数接受一个XML文件&＃xff0c;该文件设置了 一个SVG滤镜&＃xff0c;且可以包含一个锚点来指定一个具体的滤镜元素。例如&＃xff1a; filter: url(svg-url#element-id)
|
颜色渐渐变浅
css3&＃xff1a;linear-gradient
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
ie-filter
linear-gradient 在 ie9 以下是不支持的&＃xff0c;所以对于 ie6 - ie8 我们可以使用滤镜来解决&＃xff0c;代码如下&＃xff1a;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr&＃61;&＃39;#000000&＃39;, endColorstr&＃61;&＃39;#ffffff&＃39;,GradientType&＃61;0 );
由于 filter 是 ie 的私有属性&＃xff0c;所以我们需要针对 ie9 单独处理滤镜效果&＃xff0c;代码如下&＃xff1a;
:root {filter:none;}
综合
.lalla{background: #000000;background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr&＃61;&＃39;#000000&＃39;, endColorstr&＃61;&＃39;#ffffff&＃39;,GradientType&＃61;0 );
}
:root .gradient{filter:none;}
backdrop-filter&＃xff08;毛玻璃&＃xff09;
backdrop-filter的文档
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果&＃xff08;如模糊或颜色偏移&＃xff09;。 因为它适用于元素背后的所有元素&＃xff0c;为了看到效果&＃xff0c;必须使元素或其背景至少部分透明。
/* 关键词值 */
backdrop-filter: none;/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);/* 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
例子&＃xff1a;
backdrop-filter 和 filter的区别
backdrop-filter
可以让你为一个元素后面区域添加图形效果&＃xff08;如模糊或颜色偏移&＃xff09;。 因为它适用于元素背后的所有元素&＃xff0c;为了看到效果&＃xff0c;必须使元素或其背景至少部分透明。
blur()使得出现毛玻璃效果&＃xff0c;只会模糊背景&＃xff0c;
filter
blur()使得出现毛玻璃效果&＃xff0c;内容和背景都会模糊&＃xff0c;
想要做出毛玻璃效果&＃xff0c;需要两层div&＃xff0c;一个加了filter的&＃xff0c;一个内容层
css3自适应布局单位
根据CSS3规范&＃xff0c;视口单位主要包括以下4个&＃xff1a;
1.vw&＃xff1a;1vw等于视口宽度的1%。
2.vh&＃xff1a;1vh等于视口高度的1%。
2.vm&＃xff1a;相对于视口的宽度或高度中较小的那个。
3.vmin&＃xff1a;选取vw和vh中最小的那个。
4.vmax&＃xff1a;选取vw和vh中最大的那个。
5.ex&＃xff1a; 相对于字符“x”的高度。通常为字体高度的一半。
6.px&＃xff08;像素&＃xff09;&＃xff1a;1in &＃61; 2.54cm &＃61; 25.4 mm &＃61; 101.6q &＃61; 72pt &＃61; 6pc &＃61; 96px
7.q&＃xff1a;1/4毫米。绝对长度单位。
8.in&＃xff1a;英寸。绝对长度单位。
9.pt&＃xff1a;点。绝对长度单位。
10.pc&＃xff1a;派卡。绝对长度单位。相当于我国新四号铅字的尺寸
11.ch&＃xff1a;数字0的宽度
文字下划线
.f{text-underline-offset: 0rem;text-decoration: underline;
}
颜色
hsla
HSLA 即色相、饱和度、亮度、透明度&＃xff08;英语&＃xff1a;Hue, Saturation, Lightness, Alpha &＃xff09;。
hsla(hue, saturation, lightness, alpha)
- 色相&＃xff08;H&＃xff09;是色彩的基本属性&＃xff0c;就是平常所说的颜色名称&＃xff0c;如红色、黄色等。定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
- 饱和度&＃xff08;S&＃xff09;是指色彩的纯度&＃xff0c;越高色彩越纯&＃xff0c;低则逐渐变灰&＃xff0c;取 0-100% 的数值。定义饱和度; 0% 为灰色&＃xff0c; 100% 全色
- 亮度&＃xff08;L&＃xff09; 取 0-100%&＃xff0c;增加亮度&＃xff0c;颜色会向白色变化&＃xff1b;减少亮度&＃xff0c;颜色会向黑色变化。定义亮度 0% 为暗, 50% 为普通, 100% 为白
- 透明度&＃xff08;A&＃xff09; 取值 0~1 之间&＃xff0c; 代表透明度。定义透明度 0&＃xff08;透完全明&＃xff09; ~ 1&＃xff08;完全不透明&＃xff09;
16进制
不区分大小写
16进制和rgb互相转还有色卡
旧的弹性盒子 box
通过使用 box-align and box-pack 属性&＃xff0c;居中 div 框的子元素&＃xff1a;
box-align类似&＃xff1a;align-items
box-pack类似: justify-content
具体请看&＃xff1a;w3school
| 默认值&＃xff1a; | stretch |
|---|
| 继承性&＃xff1a; | no |
|---|
| 版本&＃xff1a; | CSS3 |
|---|
| Javascript 语法&＃xff1a; | object.style.boxAlign&＃61;"center" div.style.MozBoxAlign&＃61;"center" div.style.webkitBoxAlign&＃61;"center" ; |
|---|
box-align: start|end|center|baseline|stretch;
| start | 对于正常方向的框&＃xff0c;每个子元素的上边缘沿着框的顶边放置。对于反方向的框&＃xff0c;每个子元素的下边缘沿着框的底边放置。 | 测试 |
| end | 对于正常方向的框&＃xff0c;每个子元素的下边缘沿着框的底边放置。对于反方向的框&＃xff0c;每个子元素的上边缘沿着框的顶边放置。 | 测试 |
| center | 均等地分割多余的空间&＃xff0c;一半位于子元素之上&＃xff0c;另一半位于子元素之下。 | 测试 |
| baseline | 如果 box-orient 是inline-axis或horizontal&＃xff0c;所有子元素均与其基线对齐。 | 测试 |
| stretch | 拉伸子元素以填充包含块(默认值) |
div{
width:350px;
height:100px;
border:1px solid black;/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;/* W3C */
display:box;
box-pack:center;
box-align:center;
}
新的弹性盒子 flex
京公网安备 11010802041100号