为什么这不会在顶部，右侧和底部有边界线而是留下？

Question

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

我该如何解决？

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);
    }

Answer 1

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

Answer 2

编辑是 -

• 从position: absolute
中删除了img
• 从height类
中删除了width和frame

＆＃13;

＆＃13;

.frame {
	position: relative;
	display: inline-block;
	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);
	}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;