下面是一个简单的例子，展示如何在CSS中设置景深：
“`css
.parent {
position: relative;
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1;
.child:before,
.child:after {
content: “”;
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 100px;
background-color: green;
z-index: 2;
在这个例子中，`.parent`是父容器，`.child`是子元素。父容器设置了一个`z-index`为1，子元素设置了一个`z-index`为2，这样就可以在父容器和子元素之间创建景深效果。`.child:before`和`.child:after`是两个伪元素，它们分别占据父元素和子元素的边界，并且`z-index`设置为0，这样就可以完全隐藏它们。
通过这种方式，大家可以将子元素更加清晰地显示在父元素上，同时背景也更加模糊。当然，大家也可以调整景深的范围，以满足不同的需求。例如，大家可以将景深的最大值设置为父容器的`z-index`值，这样就可以使背景更加模糊，同时子元素更加清晰。
CSS3中的景深效果可以帮助大家创建更加丰富和有趣的交互效果，从而使大家的网页更加美观和易于使用。