วิธีกำหนดเส้นขอบให้กับองค์ประกอบใด ๆ โดยใช้ css โดยไม่ต้องเพิ่มความกว้างของเส้นขอบให้กับความกว้างทั้งหมดขององค์ประกอบ

Question 1

เช่นเดียวกับใน Photoshop เราสามารถให้จังหวะได้ทั้งด้านในตรงกลางและด้านนอก

ฉันคิดว่าคุณสมบัติเส้นขอบ css เริ่มต้นเป็นศูนย์กลางเหมือนศูนย์กลางใน photoshop ใช่ไหม

ฉันต้องการให้เส้นขอบภายในกล่องไม่ใช่ด้านนอก และไม่ต้องการรวมความกว้างของขอบในความกว้างของกล่อง

Question 2

outline:1px solid white;

สิ่งนี้จะไม่เพิ่มความกว้างและความสูงพิเศษ

Question 3

ลองดู CSS box-sizing ...

คุณสมบัติ CSS3 ขนาดกล่องสามารถทำได้ ค่า border-box (ตรงข้ามกับค่าเริ่มต้นของ content-box) ทำให้กล่องที่แสดงผลขั้นสุดท้ายเป็นความกว้างที่ประกาศไว้และมีการตัดขอบและช่องว่างภายในกล่อง ตอนนี้คุณสามารถประกาศให้องค์ประกอบของคุณมีความกว้าง 100% ได้อย่างปลอดภัยรวมถึงช่องว่างภายในและเส้นขอบตามพิกเซลและบรรลุเป้าหมายได้อย่างสมบูรณ์แบบ

-webkit-box-sizing: border-box; / * Safari / Chrome, WebKit อื่น ๆ * /
-moz-box-sizing: border-box; / * Firefox, Gecko อื่น ๆ * /
ขนาดกล่อง: border-box; / * Opera / IE 8+ * /

ฉันขอแนะนำให้สร้างมิกซ์อินเพื่อจัดการสิ่งนี้ให้คุณ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับขนาดกล่องได้ที่ W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Question 4

ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ที่คุณต้องการคุณสามารถใช้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;

สิ่งเดียวที่ฉันไม่สามารถพูดได้คือความแตกต่างนี้จะทำให้ประสิทธิภาพการเรนเดอร์เป็นไปอย่างชาญฉลาด ฉันคิดว่ามันอาจจะกลายเป็นปัญหาหากคุณมีองค์ประกอบหลายร้อยรายการที่ใช้เทคนิคนี้บนหน้าจอพร้อมกัน

Question 5

ฉันพบปัญหาเดียวกัน

.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;
}

สิ่งนี้ช่วยให้สามารถใช้เส้นขอบและตีกล่องได้หลายด้าน

Question 6

ใช้box-sizing: border-boxเพื่อสร้างเส้นขอบภายใน div โดยไม่ต้องแก้ไขความกว้าง 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>

Question 7

ดังที่ abenson กล่าวไว้คุณสามารถใช้โครงร่างได้แต่ gotcha อย่างหนึ่งก็คือ Opera อาจวาด "รูปทรงที่ไม่ใช่สี่เหลี่ยม" อีกทางเลือกหนึ่งที่ดูเหมือนจะใช้งานได้คือใช้ระยะขอบลบเช่น css นี้:

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

}

ด้วย html นี้:

<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>

Question 8

ใช้ช่องว่างภายในเมื่อไม่มีขอบ ลบช่องว่างภายในเมื่อมีเส้นขอบ

.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 ยังคงเท่าเดิม

Question 9

ในกรณีของคุณคุณสามารถทำเหลวไหลได้โดยการลบครึ่งขอบออกจากช่องว่างภายในหรือไม่? (-2.5 จากช่องว่างภายในหากขอบของคุณกว้าง 5px คุณจะไม่สามารถมีช่องว่างในเชิงลบได้ดังนั้นเพื่อลดความกว้างโดยรวมของกล่องให้เล็กลง) คุณสามารถเพิ่ม 2.5px พิเศษลงในระยะขอบเพื่อให้กล่องโดยรวมมีขนาดเท่ากัน

ฉันไม่ชอบคำแนะนำนี้ แต่ฉันไม่คิดว่าจะมีวิธีจัดการกับสิ่งนี้ได้อย่างหมดจด

Question 10

ดังนั้นคุณกำลังพยายามบรรลุเช่นเดียวกับข้อผิดพลาดของโมเดลกล่อง IE ที่รู้จักกันดี? มันเป็นไปไม่ได้. หรือคุณต้องการให้การสนับสนุนลูกค้าที่มี IE บน Windows เท่านั้นและเลือกประเภทเอกสารที่บังคับ IE เข้าquirksmode

Question 11

อีกทางเลือกหนึ่งหากสีพื้นหลังของคุณเป็นสีทึบ:

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
}

Question 12

โครงร่าง: 3px สีดำทึบ || เส้นขอบ: 3px ทึบสีดำ

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

}

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

<div>
hello world
</div>

ขยายข้อมูลโค้ด