问答详情
源自:2-3 CSS3边框 阴影 box-shadow(二)

如何使这两个半圆合并成一个圆

左边黑色阴影的半圆怎么才能移动到右侧,和另一个半圆合并成一个圆http://img3.mukewang.com/5f0fbd8900019d2707880485.jpg

提问者:qq_慕移动0427231 2020-07-16 10:39

个回答

  • 入幕三分
    2020-11-24 11:32:56

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>boxshadow</title>

    <style>

    .a{

        width:500px;

        hidden:500px;

        display:flex;

    }


    .boxshadow-outset{

        width:50px;

        height:100px;

        box-shadow:-4px 4px 6px red inset;

        border-radius:50px 0 0 50px;

    }

    .boxshadow-inset{

        width:50px;

        height:100px;

        box-shadow:-4px -4px 6px blue inset;

        border-radius:0 50px 50px 0;

    }

    </style>

    </head>

    <body>

    <div class="a">

     <div class="boxshadow-outset">

     </div>

     <div class="boxshadow-inset">

     </div>

    </div>

    </body>

    </html>

    用一个大div包着两个小div,再用大div使用“display:flex;” 可以让div在一行排列,然后它自动就合并了


  • TerryPan
    2020-07-16 15:02:30

    transform:translateX(75px);