问答详情
源自：2-1 2. 了解各种border-style类型

只能实现这种效果 标红的区域怎么能填充上颜色

<div style="width: 300px;height: 300px;background-color: rgba(47,41,90,0.14);position: relative;overflow: hidden;">
    <div style="width: 300px;height: 300px;border: 40px dotted #36CBCB;box-sizing: border-box;position: relative;">
        <div style="background-color: #36CBCB;width: 260px;height: 260px;position: absolute;top: -20px;left: -20px;"></div>
    </div>
</div>





http://img2.mukewang.com/6074fc800001884f19110514.jpg



提问者：慕先生4328837 2021-04-13 10:07

个回答

  • yipp
    2021-08-16 17:39:32

        <div style="width: 300px;height: 300px;background-color: rgba(47,41,90,0.14);overflow: hidden;">

    <div style="background-color: red;width: 260px;height: 40px;position: absolute;top: 0px;left: 20px;" ></div>

            <div style="width: 300px;height: 300px;border: 40px dotted #36CBCB;box-sizing: border-box;position: relative;">

                <div style="background-color: #36CBCB;width: 260px;height: 260px;position: absolute;top: -20px;left: -20px;"></div>

            </div>

        </div>

    我是填充了一层红色来当边框的背景，也是通过定位来实现的，由于先写层级低于后面的边框层

    0