- 源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title> </head> <body> <div class="container"> <div class="circleAngle"></div> </div> </body> <style> *{ margin: 0; padding: 0; } .container{ width: 100%; height: 100vh; display: flex; } .circleAngle{ width: 500px; height: 300px; border: 2px solid black; background-color: pink; /* border-radius: 5%; */ background: radial-gradient(circle at left top,transparent 30px,green 0)left top, radial-gradient(circle at right top,transparent 30px,skyblue 0) right top, radial-gradient(circle at right bottom,transparent 30px,purple 0) right bottom, radial-gradient(circle at left bottom,transparent 30px,orange 0) left bottom; /*径向渐变分别在四个角 初始透明连接处0表示从60像素开始就是这种颜色,没有过渡。 并设置四个角*/ background-size: 50% 50%; /*每个背景图片宽度为50% 高度为50%*/ background-repeat: no-repeat;/*背景图片不要重复*/ } </style> <script src="1.js"></script> </html> - 效果
css 实现反向圆角
转载请注明出处或者链接地址：https://www.qianduange.cn//article/18424.html
相关文章
-
运行pnpm run dev时报错分析：Failed to scan for dependencies from entries: C:/xxx.index.html
-
pnpm v9 正式发布，已停止 Node.js v16 支持
-
npm 全局配置
-
certificate has expired or is not yet valid：npm和node证书过期问题
-
vue大屏轮播（跑马灯）实现思路
-
Vite Vue 3 项目中使用 Element Plus
-
Vue3通透教程【十六】TS编译配置
-
【Nginx 】Nginx 部署前端 vue 项目
-
tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
-
封装Vue3 TypeScript中的useRequest网络请求Hook
发布的文章
Excel-to-JSON开源项目指南
2024-10-27 22:10:41
JSON parse error: Unexpected character (‘t‘ (code 116)): was expecting double-quote to start field n
2024-10-27 22:10:41
大数据-173 Elasticsearch 索引操作 增删改查 详细 JSON 操作
2024-10-27 22:10:16
在HarmonyOS应用开发中配置hvigor-config.json5指定版本号
2024-10-27 22:10:16
json字符串， string转json
2024-10-27 22:10:16
【开源】APIJSON 框架
2024-10-27 22:10:15
【Python报错已解决】 raise JSONDecodeError(“Expecting value“, s, err.value) from None
2024-10-27 22:10:15
Windows下VScode配置C/C 的编译、运行和调试（json文件详细解析）
2024-10-27 22:10:32
[项目][boost搜索引擎#3] Searcher模块 | 单例设计 | 去重 | 构建json
2024-10-27 22:10:20
大家推荐的文章