如何使用css將邊框添加到任何元素而不添加邊框寬度到元素的整個寬度？

如何使用CSS而不添加邊框寬度到元素的整個寬度給任何元素的邊框？如何使用css將邊框添加到任何元素而不添加邊框寬度到元素的整個寬度？

就像在Photoshop中，我們可以給卒中內部，中心和外

我覺得默認的CSS邊框屬性爲中心像中心在Photoshop中，對嗎？

我想給邊境箱內不在外面。並且不希望在框寬中包含邊框寬度。

2010-05-01 Jitendra Vyas

166

outline:1px solid white;

這不會增加額外的寬度和高度。

來源

2011-11-29 23:22:50 abenson

注意到：大綱沒有規定雙方，所以這隻有當各方都風格。 – Screenack 2013-03-25 01:02:54

我已經添加了一個答案，可以讓你只邊界一邊。 – mikevoermans 2013-05-03 16:22:46

因此，你要達到相同衆所周知IE box model bug？這是不可能的。或者您只想在Windows上使用IE來支持客戶端，並選擇一個doctype，這會迫使IE進入quirksmode。

來源

2010-05-01 02:34:07 BalusC

你的情況，你可以通過從填充減去一半的邊界做傻事呢？（如果您的邊框寬度爲5px，則填充爲-2.5，則不能有負填充，因此要減小框的整體寬度）。您可以向邊距添加額外的2.5像素以保持整體框的大小相同。

我真的不喜歡這個建議，但我不認爲有一種方法做清潔處理這個問題。

來源

2010-05-01 02:50:18 vfilby

正如abenson說，你可以使用outline但有一個問題是，歌劇可能得出一個「非矩形形狀」。這似乎工作的另一種選擇是使用負利潤率，比如這個CSS：

div { 
    float:left; 
    width: 50%; 
    border:1px solid black; 
    margin: -1px; 

}

有了這個網站：

<body> 
    <div>A block</div> 
    <div>Another block</div> 
</body>

另外一個不乾淨的選擇是額外的標記添加到HTML。例如，您可以設置外部元素的寬度並將邊框添加到內部元素中。 CSS的：

.outer { width: 50%; float: left;} 
.inner { border: 1px solid black; }

和HTML：

<body> 
    <div class="outer"> 
    <div class="inner">A block</div> 
    </div> 
    <div class="outer"> 
    <div class="inner">Another block</div> 
    <div> 
</body>

來源

2012-04-26 14:19:40 ChrisD

根據您的預期瀏覽器的支持，你可以使用box-shadow屬性。

您可以設置模糊數值爲0，並且蔓延到什麼都厚度你之後。關於盒子影子的好處是，您可以控制它是在外部（默認情況下）還是在內部（使用inset屬性）繪製。

例子：

box-shadow: 0 0 0 1px black; // Outside black border 1px

或

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

使用箱陰影您可以通過使用多個盒子陰影得到創造性的一個很大的優勢：

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

我唯一不能說這是什麼區別會使渲染性能變得明智。如果你有一百個元素在屏幕上同時使用這種技術，我會認爲它可能會成爲一個問題。

來源

2013-02-10 23:50:19

box-shadow是一個不錯的選擇 – Ali 2016-11-22 18:59:11

我遇到了同樣的問題。

.right-border { 
    position: relative; 
} 

.right-border:after { 
    content: ''; 
    display: block; 
    position: absolute; 
     top: 0; right: 0; 
    width: 1px; 
    height: 100%; 
    background: #e0e0e0; 
}

此答案允許您指定一個單邊。並且可以在IE8 +中工作 - 不像使用box-shadow。

當然，你需要選擇一個特定的一面來改變你的僞元素屬性。

*新的和改進的*

&:before { 
content: ''; 
display: block; 
position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
border: 1px solid #b7b7b7; 
}

這允許使用邊界的能力，並觸及箱的多個側面。

來源

2013-05-03 16:21:59 mikevoermans

沒有邊框時使用填充。有邊框時刪除填充。

.myDiv { 
    width: 100px; 
    height: 100px; 
    padding-left: 2px; 
    padding-right: 2px; 
} 

.myDiv:hover { 
    padding-left: 0; 
    padding-right: 0; 
    border-left: 2px solid red; 
    border-right: 2px solid red; 
}

本質上，只是用2px邊框替換2px填充。 Div的大小保持不變。

來源

2014-01-24 21:23:15

-1

另一種選擇，如果你的背景顏色是固定的：

body { background-color: #FFF; } 

.myDiv { 
    width: 100px; 
    height: 100px; 
    border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF; 
} 

.myDiv:hover { 
    border-color: blue; // Just change the border color 
}

來源

2014-01-24 21:24:53

退房CSS盒子大小......

箱上漿CSS3屬性可以做到這一點。邊框值（與內容框默認值相反）會使最終渲染框的聲明寬度以及框內的任何邊框和內邊距被切割。您現在可以安全地聲明您的元素的寬度爲100％，包括基於像素的填充和邊框，並且完美地實現您的目標。

-webkit-box-sizing：border-box;/* Safari/Chrome，其他WebKit */
-moz-box-sizing：border-box;/* Firefox，其他Gecko */
box-sizing：border-box;/* Opera/IE 8+ */

我建議創建一個mixin來處理這個給你。你可以在W3C http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

來源

2014-07-31 23:05:46 Chad

這是最好的答案，但我不認爲你真的需要所有的前綴。 http://caniuse.com/#feat=css3-boxsizing – Justin 2014-12-14 03:45:57

^賈斯汀是正確的，你不再需要前綴。「盒子大小」就足夠了。 – Chad 2017-08-10 22:00:11

這應該是IMO接受的答案。它解決了問題的核心...... – 2018-01-06 22:21:20

使用box-sizing: border-box爲了不修改DIV寬度創建邊界INSIDE一個div找到盒大小的更多信息。

使用outline創建邊框外部 div不修改div寬度。

這裏的示例： https://jsfiddle.net/4000cae9/1/

注： border-box目前它不支持IE

支持：

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 { 
    width: 100px; 
    height:100px; 
    background-color:yellow; 
} 
#test { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 10px dashed blue; 
} 
#test2 { 
    outline: 10px dashed red; 
} 


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p> 
<div id="test">border-box</div> 
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p> 
<div id="test2">outline</div>

來源

2015-03-17 14:07:29 GibboK

提綱：3px solid black ||邊境：3px的純黑色

div{ 
 
height:50px; 
 
width:150px; 
 
text-align:center; 
 

 
} 
 

 
div{ /*this is what you need ! */ 
 
outline:1px solid black 
 
}

<div> 
 
hello world 
 
</div>

來源

2017-11-13 08:34:02

如何使用css將邊框添加到任何元素而不添加邊框寬度到元素的整個寬度？

回答

相關問題