如何为iframe设置图片边框且避免图片被裁剪

你遇到的裁剪问题源于默认box-sizing: content-box的特性：设置的width:500px和height:300px仅针对iframe的内容区域，加上60px的边框后，元素总尺寸会变为620px×420px，超出预期范围导致边框被裁剪。以下是几种可行的解决方案：

方案1：用box-sizing: border-box让边框包含在尺寸内 #

修改CSS，让width和height包含边框部分，元素总尺寸保持500px×300px，边框不会超出：

iframe { 
    box-sizing: border-box;
    border: 60px solid transparent;
    border-image: url(/images/map-frame.png) 17% round;
    width: 500px;
    height: 300px;
}

方案2：调整内容区域尺寸适配边框 #

如果不想修改box-sizing，可以手动计算内容区域的尺寸（总尺寸减去两倍边框宽度），确保元素总尺寸符合预期：

iframe { 
    border: 60px solid transparent;
    border-image: url(/images/map-frame.png) 17% round;
    width: 380px; /* 500 - 60*2 */
    height: 180px; /* 300 - 60*2 */
}

方案3：用容器包裹iframe（更灵活） #

将边框样式应用到外层容器，iframe占满容器空间，彻底分离边框和iframe的尺寸逻辑：

<div class="iframe-wrapper">
  <iframe src="你的目标地址"></iframe>
</div>

.iframe-wrapper {
    box-sizing: border-box;
    border: 60px solid transparent;
    border-image: url(/images/map-frame.png) 17% round;
    width: 500px;
    height: 300px;
}
.iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none; /* 去掉iframe默认边框 */
}

内容的提问来源于stack exchange，提问作者Osama Hima