ฉันจะสร้างเส้นขอบโปร่งใสด้วย CSS ได้อย่างไร

ฉันมีliสไตล์ดังนี้:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

เมื่อฉันวางเมาส์เหนือliเส้นขอบจะปรากฏขึ้นโดยไม่ต้องliเลื่อนไปรอบ ๆ เป็นไปได้ไหมที่จะมี 'เส้นขอบ' ที่มองไม่เห็น?

คุณสามารถใช้ "โปร่งใส" เป็นสีได้ ใน IE บางเวอร์ชันจะมีสีดำ แต่ฉันไม่ได้ทดสอบตั้งแต่ IE6 วัน

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

พวกคุณหลายคนต้องลงจอดที่นี่เพื่อหาวิธีแก้ปัญหาสำหรับเส้นขอบทึบแทนที่จะเป็นแบบโปร่งใส ในกรณีที่คุณสามารถใช้rgbaที่ย่อมาจากaalpha

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

การสาธิต

ที่นี่คุณสามารถเปลี่ยนopacityของborderจาก0-1

หากคุณต้องการเพียงแค่เส้นขอบโปร่งใสที่สมบูรณ์สิ่งที่ดีที่สุดในการใช้คือtransparentเช่นborder: 1px solid transparent;

คุณสามารถลบเส้นขอบและเพิ่มช่องว่างภายใน:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

นี่คือทางออกที่ดีที่สุดที่ฉันเคยเจอมา .. นี่คือ CSS3

ใช้คุณสมบัติต่อไปนี้กับ div ของคุณหรือที่ใดก็ได้ที่คุณต้องการใส่ border trasparent

เช่น

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

จะได้ผล ..

ใช่คุณสามารถใช้ได้ border: 1px solid transparent

อีกวิธีหนึ่งคือการใช้outlineบนโฮเวอร์ (และตั้งค่าเส้นขอบเป็น 0) ซึ่งไม่ส่งผลต่อการไหลของเอกสาร:

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

NB. คุณสามารถตั้งค่าโครงร่างเป็นคุณสมบัติ sharthand เท่านั้นไม่ใช่สำหรับแต่ละด้าน มีไว้เพื่อใช้สำหรับการดีบักเท่านั้น แต่ใช้งานได้ดี

เนื่องจากคุณได้กล่าวในความคิดเห็นว่ายิ่งคุณมีตัวเลือกมากเท่าไหร่ก็ยิ่งดีเท่านั้นนี่คืออีกตัวเลือกหนึ่ง

ใน CSS3 มีสิ่งที่เรียกว่า "box model" สองแบบ หนึ่งเพิ่มเส้นขอบและช่องว่างภายในตามความกว้างขององค์ประกอบบล็อกในขณะที่อีกอันไม่ทำ คุณสามารถใช้หลังได้โดยระบุ

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

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

รายการบล็อกนี้มีวิธีเลียนแบบborder-color: transparentใน IE6 ตัวอย่างด้านล่างรวมถึงการแก้ไข "hasLayout" ที่แสดงในความคิดเห็นในบล็อก:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

ตรวจสอบให้แน่ใจว่าไม่ได้border-colorใช้สิ่งที่ใช้ในการแก้ไข IE6 ที่ใดใน.testDivองค์ประกอบ ฉันเปลี่ยนตัวอย่างจากpinkเป็น#FEFEFEเพราะดูเหมือนจะไม่ค่อยมีใครใช้

วิธีแก้ปัญหาที่ง่ายที่สุดคือใช้rgbaเป็นสีborder-color: rgba(0,0,0,0);นั่นคือสีเส้นขอบที่โปร่งใสเต็มที่

ใช้ทรัพย์สินที่โปร่งใส

border-color : transparent;