纯css实现卡券式半圆及阴影(整理)
2024-10-21 23:15:45
<!-- html部分 -->
<div class="a">
<!-- a这个大卡片里边分上下两个卡片,对应上边灰色和下边白色部分 -->
<div class="b"></div>
<div class="c"></div>
</div>
/* css部分 */
body{
background:#F0AE80
}
.a{
/*用于实现缺口那的阴影,用box-shadow缺口那会有问题*/
filter:drop-shadow(1px 1px 5px #000);
}
.b{
width:200px;
height:100px;
/*通过radial-gradient,用径向渐变创建 "图像"*/
/*定义了形状:圆形,位置:左下角,颜色:透明,半径:10,背景色:f5f5f5,背景位置:左右各一个*/
background:radial-gradient(circle at bottom left,transparent 10px, #f5f5f5 0) left,
radial-gradient(circle at bottom right,transparent 10px, #f5f5f5 0) right;
/*对应上面左右各一个,这里把背景横向平分50%*/
background-size:50% 100%;
/*必须设置否则去掉上面某些样式,会有多个透明扇形出现*/
background-repeat:no-repeat;
border-radius:10px;
}
/*下面部分同理*/
.c{
width:200px;
height:200px;
background:radial-gradient(circle at top left,transparent 10px, #fff 0) left,
radial-gradient(circle at top right,transparent 10px, #fff 0) right;
background-size:50% 100%;
background-repeat:no-repeat;
border-radius:10px;
}
可自行添加兼容性
最新文章
- 跟我学Angular2(1-初体验)
- Python 启动本地服务
- matlab 绘制条形图
- Hibernate配置问题
- android之phonegap入门
- shell中(),[]和[[]]的区别
- c语言类型转换注意事项
- POJ2225+BFS
- 修改sphinx最大输出记录数
- 调整 CComboBox 控件的下拉列表的高度
- Asp.net Identity 系列之 怎样修改Microsoft.AspNet.Identity.EntityFramework.IdentityUser 的 Id 字段的数据类型
- oracle 判断字段内是否含中文
- ORA-4031 错误故障排除与诊断[视频] (Doc ID 2016002.1)
- Windows Server 2016 禁止自动更新后重启
- jsencrypt加密
- Contain的使用
- P4行为模型BMV2安装
- 653. Two Sum IV - Input is a BST 二叉树版本
- Go.网络篇-2
- 自动下载和安装 MNIST 到 TensorFlow 的 python 源码 (转)
热门文章
- npm 更改在线仓库镜像地址
- Django Cannot assign ";A1";: ";B1"; must be a ";C1"; instance.
- Jupyter Notebook安装代码提示功能
- Oracle 存储过程4:PL/SQL动态执行DDL语句
- 7款WordPress图片分离对象存储插件 含国内主流云服务存储商
- CGAL求最小外包矩形
- SQL Server性能优化
- 19c 滚动升级
- linux查看指定时间段日志
- 【20】python之操作MySQL数据库