html - 为什么这在顶部，右侧和底部但左侧没有边界线？

我想要边界线在顶部，底部，左侧和右侧。
但是我的代码以某种方式仅适用于左侧。

我该如何解决？

DEMO@JS FIDDLE

的HTML

<div class="frame new"><img src="https://i.ytimg.com/vi/pco91kroVgQ/hqdefault.jpg" style="
    width: 480px;
    position: absolute;
    top:-48px;
    clip: rect(50px 480px 320px 0px);
    border:solid 1px #ccc;padding:4px;
"></div>

的CSS

.frame {
    position: relative;
    display: inline-block;
    height: 270px;
    width: 480px;
    overflow: hidden;
    }
    .frame:after,
    .frame:before {
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* new */
.new {
    padding: 1px;
    overflow: hidden;
    }

.new:after {
    background: red;
    content: "New";
    width: 100px;
    text-align: center;
    height: auto;
    color: #fff;
    font-family: 'Arial';
    font-weight: bold;
    padding: 5px 10px;
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
            transform: rotate(-30deg);
    left: -30px;
    top: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

最佳答案

因为图片绝对位于div内并且被裁剪，所以您可以在我附加的图片中看到它。您可以将边框应用于.frame，它将起作用

关于html - 为什么这在顶部，右侧和底部但左侧没有边界线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31369258/