CSS 阴影效果
2024-09-06 15:16:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box11 {
width: 300px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin: 10px;
} .shadow {
position: relative;
max-width: 270px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 20px rgba(0,0,0,0.1) inset;
} .shadow::before, .shadow::after {
content: "";
position: absolute;
z-index: -1;
} .shadow::before, .shadow::after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
} .shadow::before, .shadow::after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
} .shadow::after {
right: 10px;
left: auto;
transform: rotate(3deg);
} </style>
</head>
<body>
<div class="box11 shadow"></div> </body>
</html>
最新文章
- javascript中值传递与值引用的研究
- NHibernate系列文章二十四:NHibernate查询之Linq查询(附程序下载)
- MyBatis环境搭建
- bitset使用
- Android客户端与服务端交互之登陆示例
- visual studio 打开微软MVC3示例MvcMusicStore的详细修改方法
- Python——Flask框架——电子邮件
- sql server error 53
- 记一次bond引起的网络故障
- IDEA中,将项目加入maven管理。
- 字典 Dictionary
- layout图形化界面看不到内容 Failed to find the style corresponding to the id
- Linux的bash快捷键
- SSIS教程:创建简单的ETL包 -- 4. 增加错误处理流程(Adding Error Flow Redirection)
- Maven学习(三)-----Maven本地资源库
- HTTPS相关知识以及在golang中的应用
- Visual Studio 2013下我常用的两个插件
- 洛谷P4770 [NOI2018]你的名字(后缀自动机+线段树)
- 获取元素Bytagname区别/for循环应用
- Java-动态规划-最多苹果数量的方法