当前位置：首页 > news >正文

四、CSS效果

news 来源：原创 2025/7/23 6:39:47

一、box-shadow

box-shadow:在元素的框架上添加阴影效果

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow:
3px 3px red,
-1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

参考：box-shadow - CSS：层叠样式表 | MDN

课程示例：

未加box-shadow效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:200px;height:200px;margin: 100px;/* box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); *//* box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); *//* box-shadow: 0 0 0 5px green; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>

box-shadow基本用法：

/* box-shadow: x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 阴影扩散半径 阴影颜色; */
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);  //这里加了个浅灰色的半透明阴影

如果阴影不明显的话，透明系数可以调到0.5。

增加阴影扩散区域10px

加了阴影扩散区域10px,阴影区域明显比之前大了一些。

/* box-shadow: (阴影向内) x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 阴影扩散半径 阴影颜色; */
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);

/* box-shadow: x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 扩散半径 阴影颜色; */
box-shadow: 0 0 0 5px green; /*这里只给了5px的扩散*/

当扩张区域为负值，会是什么效果？

首先，为了效果明显，我们加大数值

box-shadow: 100px 100px 0 5px green;

扩展区域调为负值，调整为-20px

box-shadow: 100px 100px 0 -20px green;

调整为-50px

box-shadow: 100px 100px 0 -50px green;

可以看到，扩展半径调整为负值，随着负值越来越大，扩展大小越来越小。

box-shadow高级用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:10px;height:10px;margin: 10px;border-radius: 5px;box-shadow: 200px 200px 0 5px green,230px 200px 0 5px green,215px 215px 0 -3px red;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

这里设置border-radius: 5px;,而width:10px、height:10px，导致看起来就是个圆形，设置为border-radius: 5px，阴影也会变成圆形。

为什么写这个例子呢，就是我们需要知道，可以通过这个投影可以做许多的效果。

再看一个利用投影做出来的效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{position: relative;width: 36px;height: 36px;border-radius: 50%;margin: 300px auto;background-color: #C63D01;box-shadow: 0px 0px 0 1px #000,-20px -26px 0 -10px #333333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333333,34px -40px 0 15px #fff,34px -40px 0 16px,0px 55px 0 75px #fff,0px 55px 0 76px #000,0 22px 0 120px #08BDEB,0 22px 0 121px #000;}/*叮当猫的鼻子*/.container::before{content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background-color: #000;}/*叮当猫的嘴巴*/.container::after{content: '';position: absolute;bottom: -83px;left: -44px;width: 125px;height: 70px;border-bottom-right-radius: 28px;border-bottom: solid 2px black;border-bottom-left-radius: 28px;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

具体实现步骤：

第一步：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{position: relative;width: 36px;height: 36px;border-radius: 50%;margin: 300px auto;background-color: #C63D01;/* box-shadow: 0px 0px 0 1px #000,-20px -26px 0 -10px #333333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333333,34px -40px 0 15px #fff,34px -40px 0 16px,0px 55px 0 75px #fff,0px 55px 0 76px #000,0 22px 0 120px #08BDEB,0 22px 0 121px #000; */}/*叮当猫的鼻子*//* .container::before{content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background-color: #000;} *//*叮当猫的嘴巴*//* .container::after{content: '';position: absolute;bottom: -83px;left: -44px;width: 125px;height: 70px;border-bottom-right-radius: 28px;border-bottom: solid 2px black;border-bottom-left-radius: 28px;} */</style>
</head>
<body><div class="container"></div>
</body>
</html>

放开box-shadow

大白话：

1.营造层次感（立体感）- 可以通过向内或向外扩散阴影实现；

2.充当没有宽度的边框 - 当你的排版不能有边框，而又想要边框效果，就可以使用box-shadow扩散边框效果；

3.特殊效果 - 比如想画某种图案，可以通过box-shadow实现。

二、text-shadow_x264:文字阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:0 auto;max-width: 800px;font-size: 18px;line-height: 2em;font-family: STKaiti;/* text-shadow: 1px 1px 0 #aaa; *//* text-shadow: 0 0 1px rgba(128,128,128,.2); *//* background: black; *//* text-shadow: -1px -1px 0 white,-1px 1px 0 white,1px -1px 0 white,1px 1px 0 white; *//* text-shadow: 0 0 2px white; */}.container p{text-indent: 2em;}</style>
</head>
<body><div class="container"><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p></div>
</body>
</html>

增加text-shadow

text-shadow: 1px 1px 0 #aaa;

现在看起来，更有立体感了。

text-shadow: 0 0 1px rgba(128,128,128,.2);

未使用前：

使用后：

加上模糊，看起来颜色变深了，区别不是那么明显(PC上效果不明显，移动端上效果明显)，这就是所说的印刷品质感，就是当油墨印刷到纸上，有部分油墨渗透进纸张内，造成字体模糊的感觉。

当在复杂的页面，字体不太明显时，可以看下下面效果：

三、border-radius:圆角

课程示例：

未修改前的效果:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 100px;height: 100px;background: red;/* border: 10px solid green; *//* border-radius: 10px; *//* border-radius: 50%; *//*border: 50px solid green;border-top-left-radius: 100px 50px;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;*/border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

容器的当前宽和高分别为100px,当加上

border-radius: 50%;

当没有边框的时候，容器变成了圆形

现在，我们加上边框

border: 10px solid green;

边框也变成了圆形。

这是，设置border-radius:50px

border-radius:50px

发现，里边的就是圆形的，但是外边的边框就不那么圆了。这是因为，边框还有10px,所有我们将border-redius:60px,再看效果：

border-radius:60px

发现边框终于变圆了，要注意这点差异，所以，我们一般使用的时候，直接写50%就好了。

除了使用border-radius，我们还可以使用更详细的样式：

border: 50px solid green;
border-top-left-radius: 100px 50px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

如果去掉border,会怎么样呢？

border-radius除了支持圆形以外，还支持更多的写法。

两个半径不一样效果：

border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;

绿框内，容器的四个角不再是圆形了，有点想椭圆的形状。

同样，也可以拆开写四个角：

            border: 50px solid green;border-top-left-radius: 100px 50px;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;

如果将边框为成0，效果怎么样？

修改边框4个角

这样，我们控制4个角的值，做出各种奇怪的图案。

之前哆啦A梦的两个胡须就可以通过控制下面2个角的角度做起来

四、background:背景

雪碧图动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{}.i{width: 20px;height: 20px;background: url(./background.png) no-repeat;background-size: 20px 40px;transition: background-position .4s;}.i:hover{background-position: 0 -20px;}</style>
</head>
<body><div class="container"><div class="i"></div></div>
</body>
</html>

background-position:指定背景图像在元素中出现的位置

transition:动画过渡效果

参考：https://juejin.cn/post/7328621062727745536#%E4%B8%80%EF%BC%9Atransition%20%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C

课程示例2：

panda.jpg

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);/* background-size: contain; *//* background-repeat: no-repeat; *//* background-position: center center; *//* background-size: cover; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>

通过上面页面，可以看到图片是比容器大的，所以只能显示一部分图片区域。

想让背景图居中，看下面代码：

background-position: center center;

对比上面的页面，可以看到图片是横向居中，垂直居中的,但是还是没有显示全，耳朵部分没有显示全。

修改下代码：

background-position: center top;

设置背景图的大小

background-size: 200px 100px;
background-size: 50% 50%;
background-size: cover; /*覆盖整个画面，同时保持长宽比不变*/
background-size: contain; /*多余的地方空白出来，同时保持长宽比不变*/

先看下background-size: cover效果：

看下background-size:contain效果：

设置背景图铺排方式：

background-repeat: no-repeat - 背景图像不平铺; 
background-repeat:  repeat-x - 背景图像在横向上平铺;
background-repeat:  repeat-y - 背景图像在纵向上平铺;
background-repeat:  repeat - 背景图像在横向和纵向平铺;
background-repeat:  round - 当背景图像不能以整数次平铺时，会根据情况缩放图像;
background-repeat:  space - 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围;

五、clip-path: 按路径裁剪

按容器进行裁剪 - 可以指定显示容器的一部分显示，另一部分被裁剪掉

未裁剪之前的效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: inset(100px 50px); *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); *//* clip-path: url(#clipPath); *//* background-size: cover; *//* transition:clip-path .4s; */}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> --><polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon></clipPath></defs></svg>
</body>
</html>

开始裁剪:

clip-path: inset(100px 50px);

clip-path详解：CSS中 clip-path 的用法总结clip-path 基本介绍 clip-path 是一个CSS属性，剪切路径，允 - 掘金

解释：

clip-path: inset(100px, 50px)

inser - 按矩形裁剪，宽100px,高50px

按圆形裁剪

clip-path: circle(50px at 100px 100px);

在裁剪圆形的基础上，加入过渡效果

.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 */clip-path: circle(50px at 100px 100px);/* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); *//* clip-path: url(#clipPath); *//* background-size: cover; */transition:clip-path .4s;}.container:hover{clip-path: circle(80px at 100px 100px);}

鼠标放上去之前

鼠标放上去触发过渡效果

按多边形裁剪

clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪; 
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);

按路径裁剪，可以借助矢量图形svg

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);*//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */clip-path: url(#clipPath);/* background-size: cover; */transition:clip-path .4s;}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- r50为半径，cx,cy为圆心坐标的一个圆 --><circle cx="60" cy="60" r="50" fill="#34538b" /><!-- <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon> --></clipPath></defs></svg>
</body>
</html>

使用矢量图形svg，实现之前的多边形裁剪

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);*//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */clip-path: url(#clipPath);/* background-size: cover; */transition:clip-path .4s;}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- r50为半径，cx,cy为圆心坐标的一个圆 --><!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> --><!-- 点坐标为points的多边形 /> --><polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon></clipPath></defs></svg>
</body>
</html>

注意：clip-path功能很强大，基本上什么形状都可以做出来，但是需要注意，有些时候浏览器的兼容性不是那么好。

六、3D-transform: 在3D空间中进行变换

translate: 位移

scale: 缩放

skew: 斜切

rotate: 旋转

课程示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 500px; *//* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;}#cube div{width: 200px;height:200px;position: absolute;line-height: 200px;font-size:50px;text-align: center;}#cube:hover{/* transform: translateZ(-100px) rotateX(270deg); *//* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}.front{/* transform: translateZ(100px); *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}.back{/* transform: translateZ(-100px); *//* transform: translateZ(-100px) rotateY(180deg);background:rgba(0,255,0,.3); */}.left{/* transform: translateX(-100px) rotateY(-90deg);background:rgba(0,0,255,.3); */}.right{/* transform: translateX(100px) rotateY(90deg);background:rgba(255,255,0,.3); */}.top{/* transform: translateY(-100px) rotateX(-90deg);background:rgba(255,0,255,.3); */}.bottom{/* transform: translateY(100px) rotateX(90deg);background:rgba(0,255,255,.3); */}</style>
</head>
<body><div class="container"><div id="cube"><div class="front">1</div><!-- <div class="back">2</div><div class="right">3</div><div class="left">4</div><div class="top">5</div><div class="bottom">6</div> --></div></div>
</body>
</html>

进行2D变换：

transform: 设置对象转换

.front{/* transform: translateZ(100px); *//* 指定对象X轴（水平方向）的平移 */transform: translateX(100px);/* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}

往右100px,往下10px,旋转25度

.front{/* transform: translateZ(100px); *//*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*/transform: translateX(100px) translateY(10px) rotate(25deg);/* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}

我们改变下属性顺序看下，会是什么结果！

.front{/* transform: translateZ(100px); *//*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); */transform: rotate(25deg) translateX(100px) translateY(10px);background:rgba(255,0,0,.3);}

发现图案不一样了，所以变换，如果改变属性顺序，会造成图案不一样！！！

造成变换图案不一样的原因是，CSS是根据你的顺序逐个解析执行属性的，按照数学的矩阵运算最终计算图案的位置以及形状。

理解3D变换： x轴 - 水平，y轴 - 垂直， z轴 - 面向我们是正轴，屏幕往里是负轴。

front面是正面，理论上我们应该让它面向我们100px。

.front{transform: translateZ(100px);/*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}

我们发现，设置了z轴为什么看起来好像没有变化呢？

实际上，因为电脑屏幕是平面的，所以z轴就涉及到视觉原理近大远小，当没有透视关系对比的时候，我们是看不出视觉差的，我们设置的是z轴+100px,所以从视觉原理来说，就是保持x轴、y轴形成的图案效果。

现在，我们设置perspective：透视属性、 transform-style：定义子元素所在空间维度

.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 透视属性，z轴透视的距离; */perspective: 500px;/* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;}

通过对比效果看，在还是原来宽高的情况下，为体现透视的近大远小视觉效果，正面图案变大了，视觉上感觉离得更近了。

perspective:设置透视属性

transform-style:设置透视效果

修改translateZ，当我们将z轴设置为0px

translateZ:0px,相当于没有面向我们，也没有向屏幕里，从视觉上看，还是原来图案大小。

继续修改，当我们将z轴设置为-100px

translateZ:-200px，图案变小了，从视觉上看，向屏幕里凹进去了。

为了更明细一些，我们把背后的那个面(back)放出来，做对比:

现在，将其他面放开：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 透视属性，z轴透视的距离; */perspective: 500px;/* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;}#cube div{width: 200px;height:200px;position: absolute;line-height: 200px;font-size:50px;text-align: center;}#cube:hover{/* transform: translateZ(-100px) rotateX(270deg); *//* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}.front{transform: translateZ(100px);/*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}.back{/* transform: translateZ(-100px); z轴向屏幕里100px*//* transform: translateZ(-100px); *//* transform: translateZ(-100px) rotateY(180deg); z轴向屏幕里100px, y轴旋转180度*/transform: translateZ(-100px) rotateY(180deg);background:rgba(0,255,0,.3); }.left{transform: translateX(-100px) rotateY(-90deg);background:rgba(0,0,255,.3);}.right{transform: translateX(100px) rotateY(90deg);background:rgba(255,255,0,.3);}.top{transform: translateY(-100px) rotateX(-90deg);background:rgba(255,0,255,.3);}.bottom{transform: translateY(100px) rotateX(90deg);background:rgba(0,255,255,.3);}</style>
</head>
<body><div class="container"><div id="cube"><div class="front">1</div><div class="back">2</div><div class="right">3</div><div class="left">4</div><div class="top">5</div><div class="bottom">6</div></div></div>
</body>
</html>

现在立方体的效果已经出来了，但是因为设置透视属性的原因，立方体的视觉效果，已经超出了最一开始设置的红框的容器大小，现在我们将立方体整体变小。

#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;transform: translateZ(-100px);}

现在，立方体已经没有超出容器了。

加上动画过渡效果：

注意：

限制：3D变换性能并不是非常好，在低端机器上很容易出现卡顿。

七、面试题

四、CSS效果

一、box-shadow box-shadow:在元素的框架上添加阴影效果 /* x 偏移量 | y 偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半…...

编程日记 2025/7/23 6:39:47

每日OJ_牛客_DP44兑换零钱_C++_Java

目录牛客_DP44兑换零钱题目解析 C代码 Java代码牛客_DP44兑换零钱兑换零钱_牛客题霸_牛客网描述： 给定数组arr，arr中所有的值都为正整数且不重复。每个值代表一种面值的货币，每种面值的货币可以使用任意张，再给定一个a…...

编程日记 2025/7/22 8:46:39

目录 1. ls指令2. pwd3. whoami指令4. cd指令5. clear指令6. touch指令7. mkdir指令8. rm指令9. man指令10. cp指令11. mv指令12. cat指令13. tac指令14. more指令15. less指令16. head指令17. tail指令18. date指令19. cal指令20. find指令21. which指令22. alias指令23. grep…...

编程日记 2025/7/22 18:21:32

VOSK实现【离线中文语音】识别

Vosk是一款开源的离线语音识别工具包，具有以下功能： 多语言支持：能够对20多种语言和方言进行语音识别，如中文、英语、德语、法语、西班牙语等，可满足不同用户的语言需求。模型轻量化：每种语言的模型大小仅…...

编程日记 2025/7/15 10:03:59

Qt 控件与布局管理

1. Qt 控件的父子继承关系在 Qt 中，继承自 QWidget 的类，通常会在构造函数中接收一个 parent 参数。这个参数用于指定当前空间的父控件，从而建立控件间的父子关系。当一个控件被设置为另一控件的子控件时，它会自动成为该父控…...

编程日记 2025/7/22 23:15:00

Checkbutton组件

在这个案例中，我们将添加三个复选框（Checkbutton）组件，每个组件都有不同的初始状态。准备就绪本文案例是在上一篇《Combobox组件》上的扩展，你可以从这里下载其中的代码。如何操作我们正在创建三个状态不同的复选框组件。第一个组件是禁用状态，并且其中有一个勾…...

编程日记 2025/7/22 18:02:01

Markdown Viewer 浏览器, vscode

使用VS Code插件打造完美的MarkDown编辑器（插件安装、插件配置、markdown语法）_vscode markdown-CSDN博客右键 .md 文件，选择打开方式 （安装一些markdown的插件) vscode如何预览markdown文件 | Fromidea GitCode - 全球开发者…...

编程日记 2025/7/19 14:01:56

【QNX】QNX侧查看CPU的信息

目录一工具 ① top ▲ 使用top查看CPU信息 ▲ 输出 ② hogs ▲ 使用hogs查看CPU信息 ▲ 输出 ③ pidin ▲ 使用pidin查看CPU信息 ▲ 输出二对比在QNX实时操作系统中，可查看CPU信息的方法有top、hogs以及pidin。一工具 ① top top命令不仅能够显…...

编程日记 2025/7/19 7:32:40

Android中关于View的几种属性赋值方式

我们以给TextView组件设置颜色属性展开讲解 1、xml中直接定义（设定TextView为黑色） 2、xml 中引用style（设定TextView为蓝色） 3、在theme 中直接定义（设定TextView紫色） 4、在主题中添加对样式资源的引用…...

编程日记 2025/7/22 20:32:29

JavaScript网页基于tesseract.js提取图片中的文字，识别车牌，识别快递单号等

Tesseract是我们的老盆友了，以前写过基于JavaCV版本的Tesseract字符识别，现在tesseract终于可以在网页上面用了（tesseract.js），让我们一起来试试效果。注意：本章使用Vue模块化调用tesseract.js方式&#x…...

编程日记 2025/7/16 14:42:55

智慧金融合集：财税资金数据管理一体化大屏

随着科技的快速进步和数字化转型的加速，金融、税务等机构和企业面临的数据量呈现出爆炸式增长。传统的数据分析方法早已无法胜任现代业务的需求。为此，许多机构开始尝试创新的软件工具来更好的管理繁琐的数据。通过图扑软件的数据可视化大屏&#xff0c…...

编程日记 2025/7/19 20:05:05

Android SystemUI——最近任务应用列表（十七）

对于最近任务应用列表来说，在 Android 原生 SystemUI 中是一个单独的组件。 <string-array name="config_systemUIServiceComponents" translatable="false">……<item>com.android.systemui.recents.Recents</item> </string-arra…...

编程日记 2025/7/20 9:02:26

工业相机 SDK 二次开发-Halcon 插件

本文介绍了 Halcon 连接相机时插件的使用。通过本套插件可连接海康的工业相机。一. 环境配置 1. 拷贝动态库在用户安装 MVS 目录下按照如下路径 Development\ThirdPartyPlatformAdapter 找到目录为 HalconHDevelop 的文件夹，根据 Halcon 版本找到对…...

编程日记 2025/7/19 6:11:10

AI Agent：数字文明的暗物质，如何悄然改变我们的世界？

AI Agent：数字文明的暗物质，如何悄然改变我们的世界？ 引言在人类文明的漫长黑夜中，人工智能（Artificial Intelligence, AI）如同第一缕曙光，正在撕裂数字与现实的边界。这是一个技术奇点临近的…...

编程日记 2025/7/21 17:42:52

vscode 自用插件

vscode按住ctrl鼠标左键无法跟踪跳转方法名，装这些插件就可以 vscode-elm-jump:常规的代码跳转定义 Vue CSS Peek:跳转css定义 vue-helper:变量函数只跳转定义 Vetur 代码提示 Baidu Comate 自动帮你写console.log Turbo Console Log: ctrl alt l 选中变量之后&am…...

编程日记 2025/7/18 4:46:11

Ragas-RAG能力评测

Ragas是一个框架，它可以帮助你从不同的方面评估你的问答（QA）流程。它为你提供了一些指标来评估你的问答系统的不同方面，具体包括： 评估检索（context）的指标：提供了上下文相关性&…...

编程日记 2025/7/20 1:34:42

【PCL】Segmentation 模块—— 条件欧几里得聚类（Conditional Euclidean Clustering）

1、简介 1.1 条件欧几里得聚类（Conditional Euclidean Clustering） 本文介绍了如何使用 pcl::ConditionalEuclideanClustering 类：这是一种基于欧几里得距离和用户自定义条件的点云聚类分割算法。该类使用了与欧几里得聚类提取(Euclidean…...

编程日记 2025/7/20 14:32:34

#HarmonyOS篇：build-profile.json5里面配置productsoh-package.json5里面dependencies依赖引入

oh-package.json5 用于描述包名、版本、入口文件和依赖项等信息。 {"license": "","devDependencies": {},"author": "","name": "entry","description": "Please describe the basic…...

编程日记 2025/7/18 20:28:47

《探秘：人工智能如何为鸿蒙Next元宇宙网络传输与延迟问题破局》

在元宇宙的宏大愿景中，流畅的网络传输和低延迟是保障用户沉浸式体验的关键。鸿蒙Next结合人工智能技术，为解决这些问题提供了一系列创新思路和方法。智能网络监测与预测人工智能可以实时监测鸿蒙Next元宇宙中的网络状况，包括带宽、延迟、…...

编程日记 2025/7/17 21:01:08

java中的泛型

文章目录 java中的泛型泛型的使用1 快速入门2 泛型的介绍（1）使用泛型的好处（2）泛型的理解（3）泛型的语法（4）泛型使用的注意事项 3 自定义泛型（1）自定义泛型类&…...

编程日记 2025/7/20 20:52:54

PCF8563一款工业级、低功耗多功能时钟/日历芯片

PCF8563是PHILIPS（现NXP）公司生产的一款工业级、内含I2C总线接口功能的低功耗多功能时钟/日历芯片。以下是对该芯片的详细介绍： 一、主要特性低功耗：典型值为0.25μA（VDD3.0V，Tamb25℃）。宽电…...

编程日记 2025/7/22 20:35:00

Servlet快速入门

Servlet 由于目前主流使用SpringBoot进行开发Servlet可以说是时代的眼泪，这篇文章主要介绍我基于SpringBoot对应Servlet的浅薄认知，有利于更好的理解前端界面和java服务器的数据交换过程快速入门我比较推荐这篇文章来对Servlet有一个大概的了解都2…...

编程日记 2025/7/19 1:29:23

C语言初阶牛客网刷题——JZ17 打印从1到最大的n位数【难度：入门】

1.题目描述牛客网OJ题链接题目描述： 输入数字 n，按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3，则打印出 1、2、3 一直到最大的 3 位数 999。用返回一个整数列表来代替打印n 为正整数，0 < n < 5 示例1 输入&…...

编程日记 2025/7/18 3:58:29

【组件分享】商品列表组件-最佳实践

商品列表组件商品列表组件用于展示商品信息列表，支持多种布局方式和自定义配置。基础用法 <template><ProGoodsList :goods-list"goodsList" :layout"layout" item-click"handleItemClick" /> </template>&l…...

编程日记 2025/7/22 6:43:54

【JAVA】BOSS系统发版艺术：构建高效、优雅的微服务部署策略

在现代软件开发领域，微服务架构与容器化部署已迅速成为行业新趋势。微服务架构通过将应用拆分成多个小型、自治的服务单元，每个服务承担某项特定的业务功能。而容器化部署则以其轻量级和高度可移植的特性，为这些微服务的有效打包、分发和运行…...

编程日记 2025/7/20 22:46:16

React的响应式

在 React 中，useState 是一个 Hook，用于在函数组件中定义和管理状态。 setCount 是由 useState 返回的第二个值，用于更新状态并触发组件重新渲染。它的本质是一个状态更新函数，背后是 React 的状态管理和调度机制。下面是对 setCo…...

编程日记 2025/7/21 1:14:16

deep face cam 部署报错解决

这里写自定义目录标题使用conda创建py3.9环境使用按照readme.txt安装所有依赖后遇到的报错2.最后一个模块insightface安装报错3.运行run.py又报错原因：解决方法：4.缺少模块解决方法：pip命令安装5.AttributeError: NoneType object has no attribute configure解决方法：安装…...

编程日记 2025/7/22 23:09:03

图像处理基础(4)：高斯滤波器详解

本文主要介绍了高斯滤波器的原理及其实现过程高斯滤波器是一种线性滤波器，能够有效的抑制噪声，平滑图像。其作用原理和均值滤波器类似，都是取滤波器窗口内的像素的均值作为输出。其窗口模板的系数和均值滤波器不同，均值滤波器的…...

编程日记 2025/7/20 5:05:10

outlook附件限制最大5m如何解决

Outlook 附件大小限制为 5MB，通常由邮件服务器（如 Exchange、Office 365、Gmail 等）或本地 Outlook 配置决定。可以采取以下几种方法来解决该限制问题： 解决方案 1：调整服务器端限制（管理员权限&#xff09…...

编程日记 2025/7/18 20:33:50

Word常见问题：嵌入图片无法显示完整

场景：在Word中，嵌入式图片显示不全，一部分图片在文字下方。如： 问题原因：因段落行距导致方法一快捷方式选中图片，通过"ctrl1"快捷调整为1倍行距方法二通过工具栏调整选中图片&#xff0…...

编程日记 2025/7/20 12:31:02

【面试题】java基础概念

以下是关于这道面试题的回答，包括JDK中一些相关概念的区别以及JIT的原理： JDK中相关概念区别 JDK、JRE和JVM JDK（Java Development Kit）：是Java开发工具包，它包含了JRE和一系列开发工具。JDK提供了编译、…...

编程日记 2025/7/23 4:34:04

WebSocket实现私聊私信功能

目录后端pom.xmlConfig配置类Controller类DTO 前端安装相关依赖websocketService.js接口javascripthtmlCSS 效果展示简单测试连接： 报错解决方法1、vue3 使用SockJS报错 ReferenceError: global is not defined 后面将继续完善，待更新... 后端 pom.xml…...

编程日记 2025/7/22 4:15:49

进程的哪些内存类型容易引起内存泄漏

相信你在平时的工作中，应该遇到过下面这些场景： 伴随着服务器中的后台任务持续地运行，系统中可用内存越来越少； 应用程序正在运行时忽然被 OOM kill 掉了； 进程看起来没有消耗多少内存，但是系统内存就是不够…...

编程日记 2025/7/19 5:11:20

用着很顺手的电脑亮度随心随意调节

一、功能介绍显示高级设置，可以调节屏幕RGB色彩。娱乐亮度，一键娱乐亮度调节。护眼亮度，保护眼睛，减少蓝光。恢复正常，一键恢复到默认模块。二、问题解答 1、亮度更改后显示器无变化！软件根本都没…...

编程日记 2025/7/20 18:53:30

图片生成Prompt编写技巧

1. 图片情绪（场景氛围） 一张图片一般都会有一个情绪基调，因为作画本质上也是在传达一些情绪，一般都会借助图片的氛围去转达。例如：比如家庭聚会一般是欢乐、喜乐融融。断壁残垣一般是悲凉。还有萧瑟、孤寂等。 2.补充细…...

编程日记 2025/7/21 22:32:01

博客之星2024年度总评选——我的年度创作回顾与总结

2024年，是我在CSDN博客上持续耕耘、不断成长的一年。在此，与大家分享一下我的年度创作回顾与总结。一、创作成长与突破在人工智能领域，技术迭代迅速，知识更新频繁。为了保持自己的竞争力，在今年，我始终…...

编程日记 2025/7/20 11:31:48

前端Vue2项目使用md编辑器

项目中有一个需求，要在前端给用户展示内容，内容有 AI 生成的，返回来的是 md 格式，所以需要给用户展示 md 格式，并且管理端也可以编辑这个 md 格式的文档。使用组件库 v-md-editor。 https://code-farmer-i.github.i…...

编程日记 2025/7/21 19:38:43

Docker核心命令与Yocto项目的高效应用

随着软件开发逐渐向分布式和容器化方向演进，Docker 已成为主流的容器化技术之一。它通过标准化的环境配置、资源隔离和高效的部署流程，大幅提高了开发和构建效率。Yocto 项目作为嵌入式 Linux 系统构建工具，与 Docker 的结合进一步增强了开发…...

编程日记 2025/7/20 9:11:41

kong 网关和spring cloud gateway网关性能测试对比

该测试只是简单在同一台机器设备对spring cloud gateway网关和kong网关进行对比，受限于笔者所拥有的资源，此处仅做简单评测。一、使用spring boot 的auth-service作为服务提供者该服务提供了一个/health接口，接口返回"OK"&…...

编程日记 2025/7/19 18:01:43

DDoS攻击防护能力测试：Python版脚本

引言在互联网服务日益复杂和流量持续增长的今天，确保服务器能够应对高并发请求并具备良好的抗DDoS攻击的能力至关重要。声明以下代码仅在合法的前提下使用。工具设计原理脚本的核心在于它能够创建多个线程来并发执行不同的攻击方法，从而实现对目标…...

编程日记 2025/7/20 15:20:29

白玉微瑕：闲谈 SwiftUI 过渡（Transition）动画的“口是心非”（下）

概述秃头小码农们都知道，SwiftUI 不仅仅是一个静态 UI 构建框架那么简单，辅以海量默认或自定义的动画和过渡（Transition）特效，我们可以将 App 界面的绚丽升华到极致。不过，目前 SwiftUI 中的过渡&#x…...

编程日记 2025/7/20 15:20:22

5.4 解锁 OpenAI - Translator：模块设计，构建翻译系统的 “基石”

OpenAI-Translator 模块设计 OpenAI-Translator 作为一款基于 OpenAI GPT 模型的智能翻译助手，其模块设计至关重要。为了保证翻译的高效性、准确性与可扩展性，系统需要一个结构清晰、功能强大的模块化设计。本文将对 OpenAI-Translator 的各个模块进行详细解析，涵盖其核心功…...

编程日记 2025/7/20 9:38:03

数据分析变异系数

目录变异系数的应用场景包括： 特点： 注意事项： np.nanvar——方差，np.sanstd标准差简单来讲就是平均值/标准差变异系数（Coefficient of Variation, CV）是一种相对量的变异指标，常用于衡…...

编程日记 2025/7/15 1:21:47

C语言——编译与链接

目录前言一程序的两种环境 1翻译环境 2执行环境二预处理 1预处理符号 2#define 2.1#define 定义标识符 2.2#define 定义宏 2.2.1#和## 2.3带副作用的宏参数 2.4宏和函数的比较 2.5命名约定 3#undef 4命令行定义 5条件编译 5.1单分支 5.2多分支 5.3判断是…...

编程日记 2025/7/22 3:35:37