为什么外边框会被遮住，有办法使元素位于伪元素下方的同时，元素的边框位于伪元素的上方吗？

来源：2-18 编程练习

留白未来

2017-11-11 14:25:11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            margin: auto;
            border: 1px solid red;
            border-bottom: 200px solid red;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count:infinite;
        }
        div::before,div::after{
            position:absolute;
            top:100px;
            width:40px;
            height:40px;
            content:'';
            border-radius:100px;
        }
        div::before{
            left:200px;
            background:#f00;
            border:80px solid #fff;
        }
        div::after{
            background:#fff;
            border:80px solid #f00;
        }
        @keyframes rotate{
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

写回答

1回答

留白未来

提问者

2017-11-11

呃。。。问题解决了，粗心大意。

div元素上了边框，边框内宽度是398px，而不是400px;

而两个伪元素加其边框是400px，所以超出覆盖了;

解决方法：伪元素宽-1px；before{left:199px}