- 源代码
<!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
发布的文章
html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)
2024-09-18 23:09:50
MathType7功能介绍 注册激活方法教程分享
2024-09-18 23:09:39
HTML中span介绍以及CSS中内联式的优缺点
2024-09-18 23:09:39
《HTML 与 CSS—— 响应式设计》
2024-09-18 23:09:38
关于HTML的知识
2024-09-18 23:09:36
前端小白的学习之路(CSS3 三)
2024-09-18 23:09:36
js简单实现轮播图效果
2024-09-18 23:09:36
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
2024-09-18 23:09:33
前端提高篇（102）：jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
CSS3美化网页元素
2024-09-18 23:09:27
大家推荐的文章