1. 毛玻璃特效
backdrop-filter：属性来实现毛玻璃特效：
backdrop-filter：属性可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。
为了看到效果，必须使元素或其背景至少部分透明。
<!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>
.login-box {
height: 400px;
background-color: skyblue;
text-align: center;
padding: 20px;
position: relative;
width: 400px;
box-sizing: border-box;
}
.login {
backdrop-filter: blur(5px);
height: 200px;
width: 360px;
background: transparent;
margin: 20px auto;
position: absolute;
top: 20px;
}
</style>
</head>
<body>
<div class="login-box">测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
<div class="login">测试数据测试数据测试数据</div>
</div>
</body>
</html>
2. 将文本设为大写或小写
text-transform：属性来设置任何文本为大写或小写
uppercase：任何单词都大写
lowercase：任何但是都小写
capitalize：单词首字母大写
<!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>
.uppercase{
text-transform: uppercase;
}
.lowercase{
text-transform: lowercase;
}
.capitalize{
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">hello world</p>
<p class="lowercase">hello WORLD</p>
<p class="capitalize">hello WORLD</p>
</body>
</html>
3. 实现首字下沉
::first-letter：来实现文本首字母的下沉
<!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>
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>
<p >hello world</p>
</body>
</html>
4. 实现正方形
aspect-ratio：用来设置正方形
aspect-ratio：媒体属性可以用来测试视口的宽高比
background: #8A2BE2; width: 100px; aspect-ratio: 1/1; text-align: center; padding-top: 40px; color: red; box-sizing: border-box;
5. 图片文字环绕
shape-outside：可实现文本环绕
shape-outside：属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装
6. :where() 简化代码
:where()： 伪类，可用来简化代码
*:where()** 伪类函数接受 选择器列表 作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素
<style>
.parent div,
.parent .title,
.parent .article{
color: red;
}
</style>
用 :where() 可以简化如下
<style>
.parent :where(div, .title, #article) {
color: saddlebrown;
}
</style>
7. 实现平滑滚动
scroll-behavior：属性来实现在网页上进行平滑滚动
html {
scroll-behavior: smooth;
}
8. 悬停放大
transform：实现悬浮放大的效果
transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等。当值为scale就可以实现元素的 2D 缩放转换。
img:hover {
transform: scale(1.5);
}
9. 背景混合模式
background-blend-mode：来实现元素背景的混合
上面的图片是单纯的一张图片背景，下面的图片是背景图片和背景颜色混合而成的。
background-blend-mode 属性就用于定义了背景层的混合模式（图片与颜色）。
支持的背景混合模式：正常|乘法|屏幕|叠加|变暗|变亮|颜色减淡|饱和度|颜色|亮度。
<!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 {
margin: 40px;
}
.blend-1 {
background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
width: 300px;
height: 300px;
background-size: cover;
}
.blend-2 {
background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
width: 300px;
height: 300px;
background-color: #20126f;
background-size: cover;
background-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="blend-1 "></div>
<div class="blend-2 "></div>
</body>
</html>
10.自定义光标
cursor：属性来自定义光标的样式
body{
cursor: url("path-to-image.png"), auto;
}
扫一扫
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
