如图,怎么将边框设置成红线圈起来那样的向外的弧度。可以具体一点吗?
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无用
悬赏问题
- ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
- ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
- ¥15 绘制多分类任务的roc曲线时只画出了一类的roc,其它的auc显示为nan
- ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
- ¥20 腾讯企业邮箱邮件可以恢复么
- ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
- ¥15 错误 LNK2001 无法解析的外部符号
- ¥50 安装pyaudiokits失败
- ¥15 计组这些题应该咋做呀
- ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?