如何在iframe周围创建边框？

Question

我想在WordPress上添加一些内容的边框，因为我不知道如何添加CSS文件，所以我试图在HTML中完成所有操作（或者至少我认为是HTML）。我的编码知识只局限于高中时期。

这是我想要创建简单黑色边框的内容，宽度为1或2像素：

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px;" frameborder="1"></iframe>

但是这种方法不起作用。所以我尝试了以下方式：

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px;" frameborder="1"></iframe> <style> iframe.solid {border-style:solid} </style> 

但这也没有起作用。

我怎样才能把事情正确地放置，而不一定使用单独的CSS文件？

- simple mind

Answer 1

如果您想使用内联HTML样式：

 <iframe src="https://link_to_my_file/file.pdf" 
    style="width:1000px; height:300px; border: 1px solid black;"></iframe>

- filipbarak

---

非常感谢，你们太棒了！只是一个简单的问题：如果我想要放置两个边框，一个黄色和一个蓝色，是否仍然可以在行内完成？ - simple mind

您可以定位伪元素，使其在元素后面且更大，从而产生具有自己背景的边框效果。我建议阅读此链接：https://css-tricks.com/snippets/css/multiple-borders/ - filipbarak

嘿，菲利普，我似乎无法添加特定的颜色：如果我使用这段代码，它什么也不做：<iframe src="link_to_my_file.pdf" style="width:1000px; height:300px; border: 8px; border-color: 4593c6;"></iframe> - simple mind

尝试将它添加到边框属性中。border: 8px solid "colorhere" - filipbarak

很高兴能帮忙 :) - filipbarak

Answer 2

输出将无法在代码片段中正常工作。 HTML5 中对 <iframe> 废弃的属性包括：

scrolling

frameborder

align

longdesc

marginwidth

因此，不要将这些属性作为 iframe 的内联属性使用，您可以在 css 中使用它们。

DEMO:

iframe{
border:4px solid red;
}

<iframe src="https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=WyV_WvDBOY_E8wfHmba4Aw"></iframe>

访问此链接以获取有关弃用属性的更多信息

https://html.com/tags/iframe/

- Nihal

---

此外，frameborder 在 HTML5 中已被弃用。https://www.w3schools.com/tags/att_iframe_frameborder.asp - rpivovar

但默认情况下会有边框，如果您希望的话，我更喜欢使用 CSS 边框。 - Nihal

Answer 3

只需在iframe标签内的style = ""中添加边框声明即可。

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px; border: 2px solid red"></iframe>

- mpro

---

我该如何修改代码以使特定颜色的边框？（＃4593c6） - simple mind

边框：2像素实线，颜色为#4593c6； 参考链接： https://www.w3schools.com/css/css_border.asp - mpro