Hiayao 2022-01-05 10:29 采纳率: 69.2%
浏览 216
已结题

css怎么设置边框向外翻

如图,怎么将边框设置成红线圈起来那样的向外的弧度。可以具体一点吗?

img

  • 写回答

1条回答 默认 最新

  • 小白 猿 2022-01-05 11:33
    关注

    可以用伪类来写,两个class,四个伪类,两个灰色,两个白色

    img

    <!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月13日
  • 已采纳回答 1月5日
  • 创建了问题 1月5日

悬赏问题

  • ¥15 基于ucc28019的pfc电路中芯片一直不工作
  • ¥15 yolov8在3588板子端c++推理报错
  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能