恍然而知的css
偶然间翻阅某官网样式时，发现一些属性并不熟悉，以此文章来记录总结。希望积跬步，至千里。
mask 【遮罩】
mask在各个浏览器中的兼容并不友好，可通过can I use查阅，可见大多数浏览器并不支持，所以在使用时需使用兼容模式 -webkit-mask
1. 先看下其中的属性吧
- mask-image：指定用作遮罩的图像。
- mask-mode：指定图像的遮罩模式，可以是alpha、luminance、match-source或者color。
- mask-position：指定图像在元素内的位置。
- mask-size：指定图像的大小。
- mask-repeat：指定图像的重复方式。
- mask-origin：指定遮罩层的参考点，默认为border-box。
- mask-clip：指定遮罩层的裁剪方式，默认为border-box。
- mask-composite
2. 效果及代码展示1
【图1】 就是 通过【图2】 和 【图3】使用mask 属性实现的。蝙蝠图片的效果没展示完全，是因为css 尺寸设置的问题.我们完全不需要两个dom，通过定位和覆盖实现了
废话不多说，上代码：
<style>
.box1 {
width: 300px;
height: 200px;
/* border: 10px solid green; */
background: url(../infinity.jpg) no-repeat;
background-size: contain;
-webkit-mask-image: url(../bat.png);
-webkit-mask-size: cover;
-webkit-mask-position: center;
/* -webkit-mask-clip: text; */
}
</style>
<div class="box1"></div>
大家可以亲自操刀试下，其实都很简单。
3. 真正让我对mask 有兴趣的是，如下的这个效果
默认效果是【图1】，鼠标滑动后，如【图2】所示。
那么同学小甲就说了，不就是简单的boder-image + linear-gradent 实现的吗？但是使用border-image是不能用border-radius的。如果想要实现就需要其他的处理。这里不过多讨论。我们来看下vue官网中是如何处理的？
就是使用了mask-composite
上代码
body {
background-color: #252529cc;
}
a {
position: relative;
display: inline-block;
width: 216px;
height: 52px;
text-decoration: none;
color: #fff;
line-height: 52px;
text-align: center;
}
.first-link:before {
border: 2px solid #e5e7eb;
background: linear-gradient(45deg,#42b883,#0ebbd2) border-box;
border-color: transparent;
border-radius: 0.5rem;
content: "";
inset: 0;
-webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
position: absolute;
}
.first-link:hover {
background: linear-gradient(45deg,#42b883,#0ebbd2) border-box;
color: rgb(37 37 41/1);
border-radius: 0.5rem;
}
// html
<a href="" class="first-link">sign up with git hub</a>
具体的可看下这个文章 www.php.cn/faq/495285.…
inset
1. inset 需和 position:absolute | relactive 相结合使用
inset: 0; // 相当于 left: 0; top:0; right:0; bottom:0
inset: 1em 2em; // 等同于 top: 1em; right: 2em; bottom: 1em; left: 2em;
inset: 1em 2em 3em; // 等同于 top: 1em; right: 2em; bottom: 3em; left: 2em;
inset: 1em 2em 3em 4em; // 等同于 top: 1em; right: 2em; bottom: 3em; left: 4em;
2. inset-block
定义了元素的逻辑块首和块末偏移，并根据元素的书写模式、行内方向和文本朝向对应至实体偏移。如下所示；inset-block-end 和 inset-block-start 是 insert-block的分开写的模式
// 上面的第一个图
.box2 {
width: 100px;
/* height: 100px; */
position: absolute;
background-color: aqua;
inset-block: 10px 20px;
}
// 第二张图所示代码
.box2 {
position: absolute;
inset: 0;
border: 10px solid greenyellow;
background-color: aqua;
inset-block: 30px 60px;
writing-mode: vertical-rl; // writing-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向
}
3. inset-line
inset-inline 定义了元素的逻辑行首和行末偏移。**inset-inline-start和 inset-inline-end 是inset-line的分开写的模式
.box {
position: absolute;
inset: 0;
border: 10px solid greenyellow;
background-color: aqua;
}
// 图1 的效果代码, 是以文字的方向进行的偏移
.box2 {
inset-inline: 30px 60px;
}
// 图2 的效果代码，是以文字的方向进行的偏移
.box2 {
inset-inline: 30px 60px;
writing-mode: vertical-rl;
}
clip 属性已经被废弃，不建议使用了
1. clip-path
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。如下图所示。go to mdn
2. background-clip
background-clip 实现渐变文字。如下：
background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgba(0, 0, 255, .8) 50%, rgb(128, 0, 128) 80%);
-webkit-background-clip: text;
color: transparent;
滤镜 filter
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
1. filter 的api
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Use no filter */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
2. 简单介绍下url
在filter中，url引用一个svg的路径，并使用该svg中的fitler设置来渲染当前dom。
如该图所示的紫色毛玻璃方块，并不是通过filter:blur(5px)实现的，代码如下：
// css
.box {
width: 100px;
height: 100px;
background-color: blueviolet;
filter: url(./img/circle.svg#blurMe);
}
// html
<div class="box"></div>
// svg
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
url 里面的内容中 #blurMe 表示svg中filter的id，通过这个id 去查询使用。
filter 中还有许多其他的函数，请详细阅读 MDN 哇。
backdrop-filter
1. backdrop-filter 和 filter的区别
backdrop-filter 和 filter 的参数值都是相同的，那么他们两者有什么不同呢？
backdrop-filter 和 filter 都是 CSS 中用于实现图形效果的属性，不过它们的作用和实现方式是有所不同的。
backdrop-filter 是用于元素背景的过滤器，它可以对元素的背景进行模糊、色彩调整、对比度调整、透明度等处理，从而产生一些特殊的效果，例如模糊背景、高斯模糊效果、毛玻璃效果等。backdrop-filter 可以应用于任何拥有非透明背景的元素，包括整个页面或页面中的任何元素。
filter 则是用于元素内容的过滤器，它可以对元素内部的图像、文本等内容进行处理，例如模糊、灰度、对比度、亮度、色相、饱和度等调整，从而产生一些特殊的效果。filter 只能应用于图像、视频、文本等可视元素，而不能用于整个页面或页面中的其他元素。
此外，backdrop-filter 属性的兼容性不如 filter，在一些老的浏览器中可能无法使用。另外，由于 backdrop-filter 只应用于元素的背景，因此在使用它时需要注意它对背景的影响，可能会影响到其他元素的布局。
2. 一个简单的示例
左侧为 backdrop-filter 右侧图片为 filter 。如果我们在使用中时针对背景设置内容，那么请使用 backdrop-filter，如果针对内容设置，就使用filter。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
width: 100%;
}
.box3 {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
padding: 20px 40px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
text-align: center;
line-height: 1;
/* -webkit-backdrop-filter: blur(10px); */
/* backdrop-filter: blur(10px); */
filter: blur(10px);
transform: translate(-50%, -50%);
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.box4 {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<div class="box3">backdrop-filter: blur(10px)</div>
</div>
<div class="box4">我是被覆盖的文案</div>
</body>
</html>
转载自:https://juejin.cn/post/7251381300244791353