border 相关问题

以下代码 *{ 保证金：0；填充：0； } 。容器{ 边框：5px 纯绿色；高度：200px；宽度：200px；内边距：10px；...</desc> <question vote="1"> <p>以下代码</p> <pre><code><!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .container{ border:5px solid green; height:200px; width:200px; padding:10px; } span { border:5px solid red; } p { border:5px solid brown; } </style> </head> <body> <div class="container"> <span class="span1">This is a span 1 </span><p class="para1">This is a para 1</p> </div> </body> </html> </code></pre> <p><a href="https://i.stack.imgur.com/8C97N.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzhDOTdOLnBuZw==" alt="executed image sample"/></a></p> <p>“上面的代码在棕色段落顶部边框上创建了跨度底部边框重叠”为什么会这样，为什么段落顶部边框不位于跨度底部边框之上。</p> <p>我读到内联元素底部和顶部边框属性被忽略，但我无法理解上述场景。</p> </question> <answer tick="false" vote="1"> <p>内联元素没有适当的 <pre><code>heigth</code></pre> 属性（请参阅更多<a href="https://stackoverflow.com/questions/4967613/height-style-property-doesnt-work-in-div-elements">此处</a>）。</p> <p>由于 <pre><code>span</code></pre> 没有任何 <pre><code>height</code></pre>，因此 <pre><code>p</code></pre> 将显示在 <pre><code>span</code></pre> 的正下方（而不是其边框下方），并且 <pre><code>span</code></pre> 和 <pre><code>p</code></pre> 的边框将重叠.</p> <p>块元素可能会在内联元素之前处理，这可能就是为什么<pre><code>span</code></pre>（内联元素）边框位于<pre><code>p</code></pre>（块元素）上方。但这可能会在不同的浏览器上发生变化。（但这只是一个理论，不要太相信它）</p> <p><strong>无论如何</strong>，如果您希望 <pre><code>p</code></pre> 标签的上边框显示在 <pre><code>span</code></pre> 标签的下边框下方，解决方案之一是使用 <pre><code>display : inline-block;</code></pre> :</p> <pre><code>span { border: 5px solid red; display: inline-block; } </code></pre> </answer> <answer tick="false" vote="0"> <p>因为他们的margin设置为0，所以他们的边框在同一个地方</p> </answer> <answer tick="false" vote="0"> <p>在 padding、border 和 margin 中，内联元素唯一忽略的是顶部和底部边距，因此它们会与放置在其顶部和底部的元素重叠。他们甚至占据左边距和右边距。</p> <p>您会期望在增加内联元素的填充时具有相同的重叠。</p> </answer> <answer tick="false" vote="0"> <p>简化非定位后代元素的绘制顺序（根据 CSS 2.1 规范中定义的绘制算法。）：</p> <pre><code>1. If the element is a root element: 1. background color of element over the entire canvas. 2. For all its in-flow, non-positioned, block-level descendants in tree order: 1. background color of block element 2. border of block element 3. For all inline elements in tree order: 1. background color of inline element 2. border of element inline element 4. paint text content in tree order </code></pre> <p>绘画算法运行在先序深度优先搜索树遍历机制上...</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>span { border: 20px solid fuchsia; background-color: green; } div.first-div, div.second-div { border: 10px solid black; background-color: aquamarine; } .container { width: 300px; height: 300px; border: 2px solid green; background-color: yellow; }</code></pre> <pre><code><div class="container"> <div class="first-div">First Block Div</div> <span>Inline Span</span> <div class="second-div">Second Block Div</div> </div></code></pre> </div> </div> <p></p> <p>现在根据先序深度优先搜索算法，在第一次遍历时首先访问根元素，因此首先绘制根元素（在我们的例子中，容器 div 是根元素）的背景颜色。（按照涂装顺序第1步涂装）</p> <p>现在继续从左到右的第一次遍历，在左侧，首先访问第一个div，并先绘制第一个div的背景色，然后绘制第一个div的边框。现在第一次遍历在访问span之后找到了第二个div，span和两个div的文本内容都被跳过，因为前序深度优先遍历的第一次迭代仅用于按树顺序绘制块后代元素的背景+边框和根元素的背景颜色。因此，访问了第二个 div，并绘制了第二个 div 的背景颜色，然后绘制了第二个 div 的边框。（按照绘制顺序中的步骤2进行绘制，这是根据树顺序完成的，在树顺序中，第一个div在前，第二个div在最后）</p> <p>现在开始第二次遍历，根元素的css样式已经绘制并且没有文本内容，因此跳过根元素，现在在根元素之后再次访问第一个div，并且第一个div的文本内容是唯一剩余的部分，因此文本内容第一个 div 被绘制（按照绘制顺序第 4 步绘制）。</p> <p>现在遍历访问span元素（从左到右），因此先绘制span元素的背景色，然后绘制span元素的边框，最后打印span元素的文本内容。（按照涂装顺序第3、4步涂装）</p> <p>最后，遍历访问最后一个 div（第二个 div）元素（从左到右），并且我们知道背景和边框已经绘制，因此这次打印了第二个 div 的文本内容。（按照涂装顺序第4步涂装，其他步骤不适用则忽略）</p> <p>现在遍历结束。不再需要迭代，因为我们的元素已完全绘制...</p> <p>所以，最终的绘画顺序简而言之：</p> <ol> <li>容器div的背景颜色</li> <li>第一个 div - 背景色 + 边框</li> <li>第二个div - 背景颜色+边框</li> <li>第一个div的文本内容</li> <li>span - 背景颜色+边框</li> <li>span的文字内容</li> <li>第二个div的文字内容</li> </ol> </answer> </body></html>

html border

回答 0 投票 0

如何更改文本字段的边框颜色？

我正在尝试更改 UITextField 的边框颜色，我找不到任何在 Main(base) 中更改它的选项，我在 viewController 中使用的代码是：导入 UIKit 视图控制器类：

swift uitextfield border

回答 1 投票 0

Flutter中无法缩小Image和Border之间的间隙

我有一个颤振代码，我试图在其中提供有关课程的详细信息。我在一张图片下面添加了一段文字。我在图像周围添加了边框，使其看起来不错。对于某些人

flutter image border border-layout

回答 1 投票 0

在 div 元素周围创建突出显示，其中突出显示元素具有白色填充和彩色边框

目标是突出显示 div 的边框，并且无论底层颜色如何，都允许该突出显示可见。我们的想法是通过在 div 周围创建一个边框来实现这一点，其中每个

html css border

回答 3 投票 0

边框半径 + 背景颜色 == 裁剪边框

考虑应用了 border-radius、border 和 background-color CSS 属性的 div：废话 ... 考虑应用了 div、border-radius 和 border CSS 属性的 background-color： <div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div> 现在考虑一个类似的布局，但在内部 div 中指定了 background-color： <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"> Blah </div> </div> 令我沮丧的是，inner background-color 的 <div> 遮住了 outer <div> 的边界。这是问题的简化示例。实际上，我使用 <table> 作为具有交替行颜色的内部元素。我使用 <div> 作为外部元素，因为 border-radius 似乎不适用于 <table> 元素。这是此问题示例的 jsfiddle。有人有解决方案的建议吗？在外部overflow: hidden尝试div： <div style="border-radius:10px; border: 1px black solid; overflow: hidden"> <div style="background-color:#EEEEEE;"> Blah </div> </div> 您可以通过将 overflow: hidden; 应用于带有边框的元素来解决此问题。我认为这是一种更干净的方式。添加这些 CSS 规则： tr:first-of-type td:first-child { border-top-left-radius: 5px; } tr:first-of-type td:last-child { border-top-right-radius: 5px; } tr:last-of-type td:first-child { border-bottom-left-radius: 5px; } tr:last-of-type td:last-child { border-bottom-right-radius: 5px; } 查看更新的fiddle。您也可以将 border-radius 添加到子元素。 <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE; border-radius:10px;"> Blah </div> </div> 必须使用桌子吗？这是使用 DIV 的示例：http://jsfiddle.net/6KwGy/1/ HTML： <div id="container"> <div class="row"> <div class="leftHalf"> <p>data 1</p> </div> <div class="rightHalf"> <p>data 2</p> </div> </div> <div class="row"> <div class="leftHalf"> <p>data 1</p> </div> <div class="rightHalf"> <p>data 2</p> </div> </div> <div class="row"> <div class="leftHalf"> <p>data 1</p> </div> <div class="rightHalf"> <p>data 2</p> </div> </div> </div> CSS： .container { width: 100%; } .leftHalf { float:left; width:50%; } .rightHalf { float:left; width:50%; } .row { float: left; width: 100%; } #container .row:nth-child(odd) { background-color: #EEEEEE; } #container .row:first-child { border-top: 1px solid black; border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-radius-topleft: 5px; -webkit-border-radius-topright: 5px; } #container .row:last-child { border-bottom: 1px solid black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px; -webkit-border-radius-bottomright: 5px; } #container .row { border-left: 1px solid black; border-right: 1px solid black; } 添加一些填充，或者在外部元素上设置背景颜色给 div 一点内边距可以接受吗？这样背景颜色就不会冲突。

html border background-color css

回答 7 投票 0

Android 按钮或 TextView 边框以编程方式，而不使用 setBackgroundDrawable 方法

我正在寻找一种以编程方式为文本视图或按钮添加边框而不使用 setBackgroundResource 方法的方法。我在这里试图实现的目标是改变背景...

android button border textview

回答 3 投票 0

为 SVG 图像添加边框

是否可以将 SVG 图像包裹在边框内（即 - 在该图像周围放置 CSS 边框）。

css svg border

回答 4 投票 0

如何将边框部分包裹在元素的三个边上？

我需要一个复杂的锚元素边框。不幸的是，我只能使用锚元素的 CSS 类来解决整个问题，因为我没有任何布局选项。我已经测试过了...