[22天] CSS冷门实用特性
一、毛玻璃效果
可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
下例为一个毛玻璃效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 50%,rgba(230, 235, 236, 0.644) 50%),linear-gradient(90deg, rgba(255, 255, 255, 0.5) 50%,rgba(230, 235, 236, 0.685) 50%);
background-size: 100px 100px;
}
.box{
backdrop-filter: blur(10px);
width: 500px;
height: 400px;
margin: 300px auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>二、英文快速大小写转换
指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作
语法：
text-transform: none | capitalize | uppercase | lowercase | full-width
capitalize这个关键字强制每个单词的首字母转换为大写。其他的字符保留不变（它们写在元素里的文本保留原始大小写）。字母是 Unicode 字符集或者数字里定义的字符 Experimental；因此单词开头的任何标点符号或者特殊符号将会被忽略。
uppercase这个关键字强制所有字符被转换为大写。
lowercase这个关键字强制所有字符被转换为小写。
none这个关键字阻止所有字符的大小写被转换。
full-width这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里，并允许它们按照一般的东亚文字（比如中文或日文）对齐。
例子：
zhe shi yi ju ying wen.
zhe shi yi ju ying wen.
Wo shi Lenton.
Wo shi Lenton. zhe shi yi ju ying wen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.capitalize{
text-transform: capitalize;
}
.uppercase{
text-transform: uppercase;
}
.lowercase{
text-transform: lowercase;
}
.full-width{
text-transform: full-width;
}
</style>
</head>
<body>
<p class="capitalize">zhe shi yi ju ying wen.</p>
<p class="uppercase">zhe shi yi ju ying wen.</p>
<p class="lowercase">Wo shi Lenton.</p>
<p class="full-width">Wo shi Lenton. zhe shi yi ju ying wen.</p>
</body>
</html>三、实现正方形
aspect-ratio
为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。
.box{
background-color: #4c9add;
width: 50%;
aspect-ratio: 1/1;
}或2：1的长方形
.box{
background-color: #4c9add;
width: 50%;
aspect-ratio: 2/1;
}四、背景颜色与图片混合
background-blend-mode
定义该元素的背景图片，以及背景色如何混合。 混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。
<style>
.boxmode{
background-image: url(http://blog.lenton.cn/zb_users/theme/ccued/style/img/banner-1.jpg);
background-color: #426b8f;
background-blend-mode: overlay;
background-size: 100% 100%;
width: 500px;
height: 200px;
}
</style>
<div class="boxmode"></div>其有多种混合模式并可以重叠使用。更多可选值可以参阅
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-blend-mode
五、 纯CSS打字效果
CSS steps() 函数结合animation来实现，现看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.typing {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.typing-effect {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: typing 2s steps(22), effect .5s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes effect {
50% {
border-color: transparent;
}
}
</style>
</head>
<body>
<div class="typing">
<div class="typing-effect">Typing effect for text</div>
</div>
</body>
</html>具体来说，在这个演示中，我们通过 steps() 属性来实现分割文本的效果。
首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。
接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。
这种效果并不是特别新鲜。但大多开发者都是借助JS实现，这个方案只需要CSS就可以了。
六、 透明图片阴影效果
关于阴影我们最常用的应该是box-shadow属性了，然后还有文本的text-shadow属性。然而今天的主角是drop-shadow属性。
drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。
查看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.drop-shadow {
filter: drop-shadow(1px 8px 4px #3723a1);
}
</style>
</head>
<body>
<img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png">
</body>
</html>七、 首字母大写下沉
first-letter 伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content-section{
width: 150px;
}
.content-section p:first-of-type::first-letter {
color: #2b75d6;
float: left;
font-size: 2rem;
line-height: 2vw;
padding-right: 8px;
}
</style>
</head>
<body>
<div class="content-section">
<p>Hello everyone. I'm Lenton. Welcome to my website. </p>
</div>
</body>
</html>
参与讨论