15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页制作中边框的倒圆角怎么操作?

网页制作中边框的倒圆角怎么操作?

时间:2024-01-13 23:00:01 | 来源:网站运营

时间:2024-01-13 23:00:01 来源:网站运营

网页制作中边框的倒圆角怎么操作?:border-radius可以实现圆角,倒圆角还没试过,可以尝试以下方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style>.box_radius{ width: 100px; height: 100px; background: linear-gradient(135deg, #fff 20px, transparent 0) top left, radial-gradient(circle at 0% 100%, transparent 13px, #1359df 0) top right, linear-gradient(#1359df, #1359df) right bottom, linear-gradient(#1359df, #1359df) right bottom, radial-gradient(circle at 0% 100%, #fff 13px, transparent 0) bottom left #00CAF5; background-size: 50% 50%,15px 15px,5px 20px, 20px 5px,30% 30%; background-repeat: no-repeat; border-radius: 0 15px 0 0;} </style> </head> <body> <div class="box_radius"></div> </body></html>效果图

各种角的实现效果展示


关键词:操作,边框

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭