如何在 iframe 周围创建边框？

Posted 2023-03-05

【中文标题】如何在 iframe 周围创建边框？

【英文标题】：how do i create a border around iframe?

【发布时间】：2018-07-21 06:05:56

【问题描述】：

我正在尝试为 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 文件的情况下以正确的方式放置内容？

【参考方案1】：

输出在 sn-p 中不起作用。 在 HTML5 中不推荐使用 <iframe> 的属性

滚动

边框

对齐

longdesc

边距宽度

您可以在 css 中使用它而不是使用这些作为 iframe 内联属性

演示：

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/

【讨论】：

要补充这一点，HTML5 中不推荐使用 frameborder。 w3schools.com/tags/att_iframe_frameborder.asp

但它会默认提供边框，如果你想要的话我更喜欢css边框

【参考方案2】：

只需将边框声明添加到 iframe 标记内的 style="" 即可。

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

【讨论】：

如何修改代码以制作特定颜色的边框？ (#4593c6)

border: 2px solid #4593c6; 在这里查看参考：w3schools.com/css/css_border.asp

【参考方案3】：

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

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

【讨论】：

非常感谢你们，你们太棒了！只是一个简单的问题：如果我想放置 2 个边框，一个黄色和一个蓝色，是否仍然可以内联？

你可以放置一个伪元素，使它要么在元素的后面，要么更大，用它自己的背景制作一个边框效果。我建议阅读：css-tricks.com/snippets/css/multiple-borders

嘿 Filip 我似乎无法添加特定颜色：如果我使用此代码，它什么也不做：

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

很高兴为您提供帮助:)