如图,怎么将边框设置成红线圈起来那样的向外的弧度。可以具体一点吗?
1条回答 默认 最新
- 小白 猿 2022-01-05 11:33关注
可以用伪类来写,两个class,四个伪类,两个灰色,两个白色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { padding: 100px; } .box { padding: 100px; } .text { background-color: #ddd; display: inline-block; padding: 10px 12px; color: rgb(94, 155, 248); border-radius: 12px 0 0 12px; position: relative; margin: 0; } .text::after { content: ""; height: 20px; width: 10%; background-color: #ddd; position: absolute; top: -20px; right: 0; } .text::before { content: ""; height: 20px; width: 100%; border-radius: 0 0 12px 0; background-color: #fff; position: absolute; top: -20px; left: 0; z-index: 1; } .text1{ position: relative; display: inline-block; } .text1::after { content: ""; height: 20px; width: 10%; background-color: #ddd; position: absolute; bottom: -20px; right: 0; } .text1::before { content: ""; height: 20px; width: 100%; border-radius: 0 12px 0 0; background-color: #fff; position: absolute; bottom: -20px; left: 0; z-index: 1; } </style> </head> <body> <div class="box"> <div class="text1"> <p class="text">车辆进出预约</p> </div> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥30 Matlab打开默认名称带有/的光谱数据
- ¥50 easyExcel模板 动态单元格合并列
- ¥15 res.rows如何取值使用
- ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
- ¥15 CSP算法实现EEG特征提取,哪一步错了?
- ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
- ¥15 vue3前端取消收藏的不会引用collectId
- ¥15 delphi7 HMAC_SHA256方式加密
- ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
- ¥15 下列c语言代码为何输出了多余的空格