所属分类：web前端开发
使用 HTML 标签 定义内联框架。 <iframe> 标记与 <frameset> 标记没有某种关系，相反，它可以出现在文档中的任何位置。 <iframe> 标签定义文档内的矩形区域，浏览器可以在其中显示单独的文档，包括滚动条和边框。 src 属性用于指定占据内联框架的文档的 URL。</p> <p>我们可以轻松地将 CSS 应用于 iframe，但让我们首先看看 <iframe> 的属性 -</p> <ul class="list"> <li><p><b>src</b> - 此属性用于给出应在框架中加载的文件名。它的值可以是任何 URL。</p></li> <li><p><b>name</b> - 此属性允许您为框架指定名称。它用于指示文档应该加载到哪个框架。</p></li> <li><p><b>marginheight</b> - 此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位给出。</p></li> <li><p><b>height</b> - 此属性指定 <iframe> 的高度。</p></li> <li><p><b>scrolling</b> - 此属性控制框架上出现的滚动条的外观。该值可以是“yes”、“no”或“auto”。</p></li> <li><p><b>longdesc</b> - 此属性允许您提供指向另一个页面的链接，其中包含框架内容的详细描述。</p></li> <li><p><b>width</b> - 此属性指定 <iframe> 的宽度。</p></li> </ul> <p>现在让我们将 CSS 应用到 iframe。</p> <h2>将内联 CSS 应用到 iframe</h2> <p>style属性用于设置内联css。我们设置了边框、宽度和高度 -</p> <pre class='brush:php;toolbar:false;'><iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </pre> <h3>示例</h3> <p>让我们看一下例子 -</p> <lt-highlighter contenteditable="false" style="display: none;"><lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 654px !important; height: 293.25px !important; transform: none !important; transform-origin: 327px 146.625px !important; zoom: 1 !important;"><lt-div class="lt-highlighter__scroll-element" style="top: 0px !important; left: 0px !important; width: 654px !important; height: 293px !important;"></lt-div></lt-div></lt-highlighter><pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> </head> <body> <h1>Courses</h1> <iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </iframe> </body> </html> </pre> <h2>将内部 CSS 应用到 iframe</h2> <p>style标签用于设置iframe的内部css。我们已将 iFrame 样式设置为新的边框、宽度和高度 -</p> <pre class='brush:html;toolbar:false;'>iframe { border: 3px solid green; width: 500px; height: 400px; } </pre> <h3>示例</h3> <p>让我们看一个例子 -</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <style> iframe { border: 3px solid green; width: 500px; height: 400px; } </style> </head> <body> <h1>Courses</h1> <iframe src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </iframe> </body> </html> </pre></p><div class="keyword"><i class="fa fa-tags"></i> 标签： </div></div><div class="google-ad"><a href="/vip.html" target="_blank" title="VIP会员"><img src="https://img.zzsucai.com/202007/09/200709103447367.jpg"></a></div><div class="project-content"><div class="thumbile"><a class="nbtn nbtn-sc" id="favoriteBtn" onclick="favorite('32244')"><i class="fa fa-heart-o"></i> 收藏</a></div><div class="intsCon"> 积分说明：注册即送10金币，每日签到可获得更多金币，成为VIP会员可免金币下载！ <a href="https://www.zzsucai.com/member/index/recharge_index.html" target="_blank">充值积分</a><a href="https://www.zzsucai.com/vip.html" target="_blank">充值会员</a><a href="https://www.zzsucai.com/help/jifen.html" target="_blank">更多说明»</a></div></div><div class="project-content project-top-border"><link rel="stylesheet" type="text/css" href="https://www.zzsucai.com/static/js/share/share.min.css"><script src="https://www.zzsucai.com/static/js/share/jquery.share.min.js"></script><div id="share-1" data-weibo-title="2023如何将CSS应用于iframe？" data-qq-title="2023如何将CSS应用于iframe？"></div><script> $('#share-1').share({sites: ['weibo','qq','qzone','wechat','douban']}); </script></div><div class="project-content project-top-border"><div class="social"><div class="social-inner"><a class="social-left" href="https://www.zzsucai.com/biancheng/32243.html"><i class="fa fa-chevron-left" aria-hidden="true"></i><span>2023当浏览器开始在线工作时，在HTML中执行一个脚本吗？<span></span></span></a><div class="social-round"><div class="social-round-border"><span></span></div><i onclick="Backtop();" class="social-round-inner fa fa-arrow-up" aria-hidden="true"></i></div><a class="social-right" href="https://www.zzsucai.com/biancheng/32245.html"><span>2023在Fabric.js中，当创建一个用于图像的画布时，HTML5画布层在鼠标点击时消失，而Firefox停止响应</span><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></div></div><div class="in2-tit"><h4><i class="fa fa-comments-o" aria-hidden="true"></i> 讨论这个素材（0）<span class="z14">回答他人问题或分享使用心得奖励金币</span></h4></div><div class="in2" id="meglist"><a name="anchor"></a><p id="no-m-data">〒_〒 居然一个评论都没有……</p></div><div class="message in2"><div class="alert-success" id="err"></div><textarea id="body" class="textarea" style="height:120px; width:100%;" placeholder="您有什么想法要说的吗？帮助他人、分享技术会获得积分奖励！"></textarea><div class="Mbutton"><span class="fl emotion" id="emotion">表情</span><span class="fr"><span class="fl" style="margin-right: 20px;"><i class="fa fa-exclamation-triangle"></i> 文明上网，理性发言！</span><button onclick="getPlainTxt('32244')" type="button" id="myButton" class="btn btn-primary"><i class="fa fa-commenting"></i> 发表评论</button></span></div></div></div><div class="sidebar fr"><ul class="s_nav"><li><a href="https://www.zzsucai.com/biancheng/" title="编程技术"><i class="fa fa-folder"></i> 编程技术 （30404）</a></li><li><a href="https://www.zzsucai.com/biancheng/list-226.html" title="web前端开发"><i class="fa fa-folder"></i> web前端开发 （18654）</a></li></ul><div class="b20"></div><div class="zuozhe list-group"><h6>热门推荐 / HOT</h6><ul class="newtop"></ul><div class="b15"></div><h6>最新发布 / NEW</h6><ul class="newtop"><li><a href="https://www.zzsucai.com/biancheng/36521.html" title="2024轻松掌握CSS框架的实用技巧"><i class="fa fa-caret-right" aria-hidden="true"></i>2024轻松掌握CSS框架的实用技巧</a></li><li><a href="https://www.zzsucai.com/biancheng/36520.html" title="2024CI框架中如何添加CSS样式？"><i class="fa fa-caret-right" aria-hidden="true"></i>2024CI框架中如何添加CSS样式？</a></li><li><a href="https://www.zzsucai.com/biancheng/36519.html" title="2024快速掌握CSS框架的方法"><i class="fa fa-caret-right" aria-hidden="true"></i>2024快速掌握CSS框架的方法</a></li><li><a href="https://www.zzsucai.com/biancheng/36518.html" title="2024CSS框架和排版技巧的用法比较"><i class="fa fa-caret-right" aria-hidden="true"></i>2024CSS框架和排版技巧的用法比较</a></li><li><a href="https://www.zzsucai.com/biancheng/36517.html" title="2024为什么我们应该学习如何引入第三方框架的CSS"><i class="fa fa-caret-right" aria-hidden="true"></i>2024为什么我们应该学习如何引入第三方框架的CSS</a></li><li><a href="https://www.zzsucai.com/biancheng/36516.html" title="2024探秘五种流行的CSS布局框架"><i class="fa fa-caret-right" aria-hidden="true"></i>2024探秘五种流行的CSS布局框架</a></li><li><a href="https://www.zzsucai.com/biancheng/36515.html" title="2024对比和解释CSS框架与组件库的不同和用途"><i class="fa fa-caret-right" aria-hidden="true"></i>2024对比和解释CSS框架与组件库的不同和用途</a></li><li><a href="https://www.zzsucai.com/biancheng/36514.html" title="2024推荐值得探索的Ajax控件有哪些？"><i class="fa fa-caret-right" aria-hidden="true"></i>2024推荐值得探索的Ajax控件有哪些？</a></li><li><a href="https://www.zzsucai.com/biancheng/36513.html" title="2024了解canvas JS技术的五个必知案例"><i class="fa fa-caret-right" aria-hidden="true"></i>2024了解canvas JS技术的五个必知案例</a></li><li><a href="https://www.zzsucai.com/biancheng/36512.html" title="2024全面解读canvas：深入了解canvas方法的全貌"><i class="fa fa-caret-right" aria-hidden="true"></i>2024全面解读canvas：深入了解canvas方法的全貌</a></li></ul><div class="b15"></div><h6>点击排行 / RANK</h6><ul class="ranking"><li><em>1</em><a href="https://www.zzsucai.com/biancheng/15872.html" title="回答sne是什么牌子的手机">回答sne是什么牌子的手机</a></li><li><em>2</em><a href="https://www.zzsucai.com/biancheng/13694.html" title="golang：go语言int64如何转string">golang：go语言int64如何转string</a></li><li><em>3</em><a href="https://www.zzsucai.com/biancheng/19668.html" title="h5教程HTML5 Canvas实现烟花绽放的特效">h5教程HTML5 Canvas实现烟花绽放的特效</a></li><li><em>4</em><a href="https://www.zzsucai.com/biancheng/16320.html" title="回答综合电子信息系统的发展趋势重点是什么">回答综合电子信息系统的发展趋势重点是什么</a></li><li><em>5</em><a href="https://www.zzsucai.com/biancheng/18368.html" title="css教程10款好看且实用的文字动画特效，让你的页面更吸引人！">css教程10款好看且实用的文字动画特效，让你的页面更吸引人！</a></li><li><em>6</em><a href="https://www.zzsucai.com/biancheng/32320.html" title="2023如何解决“[Vue warn]: Missing required prop”错误">2023如何解决“[Vue warn]: Missing required prop”错误</a></li><li><em>7</em><a href="https://www.zzsucai.com/biancheng/15961.html" title="回答深圳坐地铁用什么app">回答深圳坐地铁用什么app</a></li><li><em>8</em><a href="https://www.zzsucai.com/biancheng/17604.html" title="html代码html如何添加音乐">html代码html如何添加音乐</a></li><li><em>9</em><a href="https://www.zzsucai.com/biancheng/16129.html" title="回答lenovosoftstore是什么文件夹">回答lenovosoftstore是什么文件夹</a></li><li><em>10</em><a href="https://www.zzsucai.com/biancheng/14149.html" title="2022总结分享一些基于小程序的面试题，让你面试稳操胜券！">2022总结分享一些基于小程序的面试题，让你面试稳操胜券！</a></li></ul></div><div class="zuozhe list-group"><h6>标签推荐 / TAG<span class="more"><a href="https://www.zzsucai.com/tag.html" title="全部标签">更多</a></span></h6><ul id="divTags"><li><a title="," href="https://www.zzsucai.com/tag/11746.html">,<span class="tag-count"> (5252)</span></a></li><li><a title="css," href="https://www.zzsucai.com/tag/8916.html">css,<span class="tag-count"> (689)</span></a></li><li><a title="python," href="https://www.zzsucai.com/tag/6741.html">python,<span class="tag-count"> (660)</span></a></li><li><a title="php," href="https://www.zzsucai.com/tag/6089.html">php,<span class="tag-count"> (620)</span></a></li><li><a title="jquery," href="https://www.zzsucai.com/tag/9716.html">jquery,<span class="tag-count"> (469)</span></a></li><li><a title="Jquery" href="https://www.zzsucai.com/tag/39.html">Jquery<span class="tag-count"> (440)</span></a></li><li><a title="golang," href="https://www.zzsucai.com/tag/7468.html">golang,<span class="tag-count"> (348)</span></a></li><li><a title="javascript," href="https://www.zzsucai.com/tag/8562.html">javascript,<span class="tag-count"> (285)</span></a></li><li><a title="动画特效" href="https://www.zzsucai.com/tag/865.html">动画特效<span class="tag-count"> (269)</span></a></li><li><a title="响应式" href="https://www.zzsucai.com/tag/87.html">响应式<span class="tag-count"> (241)</span></a></li><li><a title="JS代码" href="https://www.zzsucai.com/tag/74.html">JS代码<span class="tag-count"> (229)</span></a></li><li><a title="网站模板" href="https://www.zzsucai.com/tag/89.html">网站模板<span class="tag-count"> (226)</span></a></li><li><a title="焦点图" href="https://www.zzsucai.com/tag/54.html">焦点图<span class="tag-count"> (215)</span></a></li><li><a title="html5" href="https://www.zzsucai.com/tag/75.html">html5<span class="tag-count"> (208)</span></a></li><li><a title="css3" href="https://www.zzsucai.com/tag/76.html">css3<span class="tag-count"> (199)</span></a></li><li><a title="小程序," href="https://www.zzsucai.com/tag/7905.html">小程序,<span class="tag-count"> (198)</span></a></li><li><a title="react," href="https://www.zzsucai.com/tag/9613.html">react,<span class="tag-count"> (192)</span></a></li><li><a title="软件," href="https://www.zzsucai.com/tag/8885.html">软件,<span class="tag-count"> (185)</span></a></li><li><a title="幻灯片" href="https://www.zzsucai.com/tag/51.html">幻灯片<span class="tag-count"> (179)</span></a></li><li><a title="HTML模板" href="https://www.zzsucai.com/tag/145.html">HTML模板<span class="tag-count"> (176)</span></a></li><li><a title="动画效果" href="https://www.zzsucai.com/tag/359.html">动画效果<span class="tag-count"> (176)</span></a></li><li><a title="php数组,php," href="https://www.zzsucai.com/tag/6717.html">php数组,php,<span class="tag-count"> (174)</span></a></li><li><a title="css3动画" href="https://www.zzsucai.com/tag/1320.html">css3动画<span class="tag-count"> (159)</span></a></li><li><a title="php,php数组," href="https://www.zzsucai.com/tag/6716.html">php,php数组,<span class="tag-count"> (156)</span></a></li><li><a title="鼠标悬停" href="https://www.zzsucai.com/tag/383.html">鼠标悬停<span class="tag-count"> (151)</span></a></li><li><a title="微信小程序," href="https://www.zzsucai.com/tag/7894.html">微信小程序,<span class="tag-count"> (151)</span></a></li><li><a title="es6," href="https://www.zzsucai.com/tag/9725.html">es6,<span class="tag-count"> (146)</span></a></li><li><a title="jQuery特效" href="https://www.zzsucai.com/tag/907.html">jQuery特效<span class="tag-count"> (143)</span></a></li><li><a title="图片" href="https://www.zzsucai.com/tag/38.html">图片<span class="tag-count"> (138)</span></a></li><li><a title="图片轮播" href="https://www.zzsucai.com/tag/99.html">图片轮播<span class="tag-count"> (136)</span></a></li></ul></div></div><div class="clear"></div></div><div class="replyFormModel"><div class="replyForm"><input type="hidden" name="reply" id="reply" /><input type="text" name="replyBody" id="replyBody" class="inp fl" placeholder="请输入回复内容……" /><button onclick="replyMessage('32244')" type="button" id="myReplyButton" class="sub fr"><i class="fa fa-commenting"></i> 提交回复</button><div class="clear"></div></div></div><div id="openDownModel"><div class="downModel"></div></div><script type="text/javascript" src="https://www.zzsucai.com/static/js/shCore.js"></script><script type="text/javascript" src="https://www.zzsucai.com/static/js/shBrushXml.js"></script><script type="text/javascript" src="https://www.zzsucai.com/static/js/common.js"></script><script type="text/javascript" src="https://www.zzsucai.com/static/js/jquery.qqFace.js"></script><script type="text/javascript">SyntaxHighlighter.highlight(); // 评论框表情 $('#emotion').qqFace({ path:'https://www.zzsucai.com/static/images/face/', assign:'body' }); </script><!--侧栏 开始--><div id="rightMenuBar2016" class="right-menu-bar menu-bar-enable" style="right: 0px;"><div class="right-menu-container" id="J_rightBarMenuContainer"><a href="https://www.zzsucai.com/member/index/main.html" class="right-menu user" target="_blank" rel="nofollow"><i class="fa fa-user" aria-hidden="true"></i><br>会员</a><a href="https://www.zzsucai.com/member/index/qiandao.html" class="right-menu" rel="nofollow"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><br>签到</a><a href="https://wpa.qq.com/msgrd?v=3&uin=8877360&site=qq&menu=yes" class="right-menu qq" target="_blank" rel="nofollow"><i class="fa fa-qq" aria-hidden="true" style="font-size: 18px;"></i><br>客服</a><a href="javascript:void(0);" class="right-menu qun" rel="nofollow"><i class="fa fa-users" aria-hidden="true"></i><br>QQ群</a><a href="https://www.zzsucai.com/member/index/recharge_index.html" class="right-menu" target="_blank" rel="nofollow"><i class="fa fa-jpy" aria-hidden="true"></i><br>充值</a></div><a href="javascript:void(0)" class="right-menu back-top back-top-visible" id="J_backTop"><i class="fa fa-sort-asc" aria-hidden="true"></i><br>Top</a><a href="javascript:void(0)" class="right-menu collapse-right-bar" id="J_closeRightBar"><i class="fa fa-times" aria-hidden="true"></i></a><a href="javascript:void(0)" class="right-menu expand-right-bar" id="J_expandRightBar"><i class="fa fa-arrow-left" aria-hidden="true"></i></a><!-- QQ群 开始 --><div class="concat-qun-container" id="J_concatQunContainer"><span class="close">X</span><h3 class="title">技术交流QQ群</h3><a class="qq-group-list clearfix" href="//shang.qq.com/wpa/qunwpa?idkey=34dd03a9c4913234e6d06c618b0053822c7d5d2af4bc22595fc991a0fa81c307" target="_blank" rel="nofollow"><div class="fl name">技术交流1群</div><span class="fr add-group">加群</span></a><a class="qq-group-list clearfix" href="//shang.qq.com/wpa/qunwpa?idkey=34dd03a9c4913234e6d06c618b0053822c7d5d2af4bc22595fc991a0fa81c307" target="_blank" rel="nofollow"><div class="fl name">技术交流2群</div><span class="fr add-group">加群</span></a><a class="qq-group-list clearfix" href="//shang.qq.com/wpa/qunwpa?idkey=34dd03a9c4913234e6d06c618b0053822c7d5d2af4bc22595fc991a0fa81c307" target="_blank" rel="nofollow"><div class="fl name">技术交流3群</div><span class="fr add-group">加群</span></a></div><!--QQ群 结束--></div><!--侧栏 结束--><div class="footer"><div class="w1000"><div class="flinks"><a class="a1" href="https://www.zzsucai.com/help/about.html">关于我们</a><a href="https://www.zzsucai.com/help/contactus.html">联系我们</a><a href="https://www.zzsucai.com/help/advertising.html">广告服务</a><a href="https://www.zzsucai.com/help/statement.html">免责声明</a><a href="https://www.zzsucai.com/sitemap.html" target="_blank">网站地图</a><a href="https://www.zzsucai.com/help/jifen.html">获取积分</a></div><div class="powerby"><span class="fl">Copyright 2016-2025 © 站长素材网（<a href="https://www.zzsucai.com/" title="站长素材网">zzsucai.com</a>）</span><span class="fr">工作时间:周一至周日早8:00-23:00 - Email:8877360@qq.com - 客服QQ:8877360 - <a target="_blank" href="https://beian.miit.gov.cn/">桂ICP备2022004755号-1</a></span><div class="clear"></div></div><div style="margin-top: 20px;text-align: right;">本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！ </div></div></div><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"1zzWDj6YzwlMNxxW",ck:"1zzWDj6YzwlMNxxW"})</script> </body></html>
微博登录
QQ登录