生成一段HTML和CSS代码,要求:需要一个盒子,并且带、倒影
时间: 2024-06-04 21:13:16 浏览: 11
好的,以下是生成一个带倒影的HTML和CSS代码:
HTML代码:
<div class="box">
<img src="image.jpg" alt="image">
</div>
CSS代码:
.box {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
}
.box img {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 1;
}
.box:before {
content: "";
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
transform: scaleY(-1);
z-index: 0;
}
.box:after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 20px;
background: rgba(255, 255, 255, 0.5);
opacity: 0.5;
filter: alpha(opacity=50);
border-radius: 50%;
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)