blocks|key|766782|text|CSS3规范具有border-image属性。有关如何使用它的信息，请查看本文：http://css-tricks.com/understanding-border-image/。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|766783|总结一下：|766784|您可以像这样应用边框图像：|766785|border-image:+url(border-image.png)+25%25+repeat;|code-block|syntax|javascript|766786|通过提供图像的URL，切片图像的位置以及将图像应用于元素边界的行为。|766787|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/understanding-border-image/^0|8|C|14|1D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

CSS3 spec has the <code>border-image</code> property. Check out this article: <a href="http://css-tricks.com/understanding-border-image/" rel="noreferrer">http://css-tricks.com/understanding-border-image/</a> for information on how to use it.

To summarize:

You apply the border-image like so:

<pre><code>border-image: url(border-image.png) 25% repeat;
</code></pre>

by providing a URL to your image, where to slice your image and the behavior of applying the image to the element's border.

blocks|key|118970|text|实际上，你可以使用一个技巧来做这件事。使用Google作为边框图像查看我的demo|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|118971|基本上，这个想法是有两个div。|118972|<div+id="borderDiv">
++++<div+id="inner">
++++</div>
</div>|code-block|syntax|javascript|118973|CSS|118974|#borderDiv+{
++++padding:+2px;+/*+This+is+the+width+of+the+border+:P+*/
++++background:+url("borderimage.png");
}
#inner+{
++++background:+#fff;
}|118975|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Starx/WbjWd/1/^0|L|6|11|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

Actually, you can do this using a trick. Check out my <a href="http://jsfiddle.net/Starx/WbjWd/1/" rel="nofollow">demo</a> using <code>Google</code> as border-image

Basically, the idea is having two divs.

<pre><code>&lt;div id="borderDiv"&gt;&lt;!-- This will serve as the border --&gt;
 &lt;div id="inner"&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CSS

<pre><code>#borderDiv {
 padding: 2px; /* This is the width of the border :P */
 background: url("borderimage.png");
}
#inner {
 background: #fff;
}
</code></pre>

blocks|key|766812|text|使用CSS3的答案和使用嵌套div的答案都是不错的答案，但这取决于您最看重的是什么。如果边框图像对您的设计至关重要，一个好的经验法则是使用支持最广泛的解决方案。在本例中，这将是嵌套的div。但是，如果语义标记和易用性对您更重要，请使用CSS3设计边框图像。只需认识到，浏览器支持将会减少，因此能够欣赏其效果的受众将会减少。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766813|最重要的是，了解你的主要受众和他们使用的浏览器。为他们设计。|766814|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Both the answer with CSS3 and the one with the nested divs are good answers, but it depends on what you value most. If the border image is crucial to your design, a good rule of thumb is to use the most widely supported solution. In this case that would be the nested divs. However, if semantic markup and ease are more important to you, use CSS3 to design the border image. Just realize that there will be less browser support, and thus a smaller audience that can appreciate the effect.

Most importantly, know your primary audience and the browsers they use. Design for them.

Is it possible to use an image of width 480px and height 360px and apply it to a <code>div</code> as a border? I know its possible to implement the below css code as a border, but I can not seem to work out how to use an image instead.

<pre><code>border:1px solid blue;
</code></pre>

Image border on DIV

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否可以使用宽度为480px、高度为360px的图像，并将其应用于div作为边框？我知道可以实现下面的css代码作为边框，但我似乎不能解决如何使用图像代替。border:1px solid blue;

问DIV上的图像边界
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DIV上的图像边界EN