คุณสามารถตั้งค่าความทึบของเส้นขอบใน CSS ได้หรือไม่?

มีวิธี CSS ตรงไปตรงมาที่จะทำให้เส้นขอบขององค์ประกอบกึ่งโปร่งใสด้วยอะไรเช่นนี้?

border-opacity: 0.7;

ถ้าไม่มีใครมีความคิดว่าฉันสามารถทำได้โดยไม่ต้องใช้ภาพหรือไม่?

น่าเสียดายที่opacityองค์ประกอบทำให้องค์ประกอบทั้งหมด (รวมถึงข้อความใด ๆ ) กึ่งโปร่งใส วิธีที่ดีที่สุดในการทำให้เส้นขอบกึ่งโปร่งแสงคือรูปแบบสี rgba ตัวอย่างเช่นนี่จะให้เส้นขอบสีแดงที่มีความทึบ 50%:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

ปัญหาของวิธีการนี้คือเบราว์เซอร์บางตัวไม่เข้าใจrgbaรูปแบบและจะไม่แสดงเส้นขอบใด ๆ เลยหากเป็นการประกาศทั้งหมด วิธีแก้ปัญหาคือให้การประกาศสองเส้นขอบ ครั้งแรกที่มีความทึบปลอมและครั้งที่สองที่มีจริง หากเบราว์เซอร์สามารถใช้งานได้จะใช้เบราว์เซอร์ที่สองหากไม่ใช้จะใช้เบราว์เซอร์แรก

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

การประกาศเส้นขอบแรกจะเป็นสีที่เทียบเท่ากับเส้นขอบสีแดงทึบแสง 50% บนพื้นหลังสีขาว (แม้ว่ากราฟิกใด ๆ ที่อยู่ใต้เส้นขอบจะไม่ทำให้เลือดออก)

UPDATE:ฉันได้เพิ่ม "background-clip: padding-box;" คำตอบนี้ (ตามคำแนะนำของ SooDesuNe ในความคิดเห็น) เพื่อให้แน่ใจว่าเส้นขอบจะยังคงโปร่งใสแม้ว่าจะใช้สีพื้นหลังที่เป็นของแข็ง

ง่ายมากให้ใช้เงาทึบกับ 0 ออฟเซ็ต:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

นอกจากนี้หากคุณกำหนดรัศมีเส้นขอบให้กับองค์ประกอบมันจะช่วยให้คุณมีขอบที่โค้งมน

การสาธิต jsFiddle

ตามที่คนอื่นพูดถึง: CSS-3 บอกว่าคุณสามารถใช้rgba(...)ไวยากรณ์เพื่อระบุสีเส้นขอบด้วยค่าความทึบ (อัลฟา)

นี่เป็นตัวอย่างรวดเร็วหากคุณต้องการตรวจสอบ

• ใช้งานได้ใน Safari และ Chrome (อาจใช้ได้กับเบราว์เซอร์ webkit ทั้งหมด)

• มันทำงานได้ใน Firefox

• ฉันสงสัยว่ามันใช้งานได้ใน IE แต่ฉันสงสัยว่ามีตัวกรองหรือพฤติกรรมบางอย่างที่จะทำให้ทำงานได้

นอกจากนี้ยังมีโพสต์สแต็คโอเวอร์โฟลว์นี้ซึ่งแนะนำปัญหาอื่น ๆ - กล่าวคือเส้นขอบจะแสดงสีพื้นหลังด้านบน (หรือภาพพื้นหลัง) ที่คุณระบุ ดังนั้นการ จำกัด ประโยชน์ของอัลฟาชายแดนในหลายกรณี

หากคุณตรวจสอบการเข้ารหัส CSS ด้วยเครื่องมือตรวจสอบความถูกต้อง W3C คุณจะเห็นว่ารหัส CSS ของคุณเป็นที่ยอมรับแม้ว่าจะทำงานในเบราว์เซอร์หลักหรือไม่ก็ตาม

การสร้างเส้นขอบโปร่งใสผ่าน CSS ตามที่เขียนไว้ด้านบน

border: 1px solid rgba(255, 0, 0, .5);

ไม่ได้รับการยอมรับตามมาตรฐาน W3C ไม่ใช่แม้แต่สำหรับ CSS3 ฉันใช้ตัวตรวจสอบอินพุตโดยตรงกับโค้ด CSS ต่อไปนี้

.test { border: 1px solid rgba(255, 0, 0, .5); }

ผลการวิจัยพบว่า

ข้อผิดพลาดของค่า: ชายแดนไม่รู้จักค่าหรือค่ามากเกินไป: 1px solid rgba (255,0,0,0.5)

โชคไม่ดีที่ค่าอัลฟา (ตัวอักษร "a" ท้าย "rgb") ไม่ได้รับการยอมรับจาก W3C ซึ่งเป็นส่วนหนึ่งของค่าสีเส้นขอบในขณะนี้ ฉันสงสัยว่าทำไมมันไม่ได้มาตรฐานเพราะทำงานในเบราว์เซอร์ทั้งหมด ข้อผูกมัดเพียงอย่างเดียวคือคุณต้องการยึดติดกับมาตรฐาน W3C หรือไม่ก็สร้างมันใน CSS

หากต้องการใช้W3C CSS ออนไลน์ตรวจสอบ Input

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

* ไม่เท่าที่ฉันรู้ว่าไม่มีสิ่งที่ฉันทำตามปกติในสถานการณ์แบบนี้คือการสร้างบล็อกที่มีขนาดใหญ่กว่า ((เส้นขอบ * 2) + ต้นฉบับ) และทำให้มันโปร่งใสโดยใช้

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

นี่คือตัวอย่าง

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

ปรับปรุง:

คำตอบนี้ล้าสมัยเนื่องจากคำถามนี้มีอายุมากกว่า 8 ปี ทุกวันนี้เบราว์เซอร์ที่ทันสมัยรองรับ rgba, box shadow และอื่น ๆ แต่นี่เป็นตัวอย่างที่ดีว่าเมื่อ 8 ปีที่แล้วเป็นอย่างไร

ในฐานะที่เป็นวิธีการแก้ปัญหาอื่นที่อาจทำงานในบางกรณีเปลี่ยนไปborder-styledotted

การมีกลุ่มพิกเซลสลับกันระหว่างสีพื้นหน้าและสีพื้นหลังนั้นไม่เหมือนกับบรรทัดต่อเนื่องของพิกเซลที่โปร่งใสบางส่วน ในทางกลับกันสิ่งนี้ต้องใช้ CSS น้อยลงอย่างมากและสามารถทำงานร่วมกันได้กับทุกเบราว์เซอร์โดยไม่มีคำสั่งเฉพาะของเบราว์เซอร์

คำตอบอื่น ๆ จะจัดการกับประเด็นทางเทคนิคของปัญหาความทึบชายแดนในขณะที่ฉันต้องการนำเสนอการแฮ็ก (CSS และ pure HTML เท่านั้น) โดยพื้นฐานแล้วสร้าง div container ที่มี div div แล้ว div content

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

จากนั้น CSS: (ตั้งค่าเส้นขอบเนื้อหาเป็นไม่มีดูแลการวางตำแหน่งเพื่อให้ความหนาของเส้นขอบถูกนำมาพิจารณา)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

ไม่มีทางที่จะไม่เพียงตั้งค่าความทึบของเส้นขอบด้วย CSS ที่

ตัวอย่างเช่นหากคุณไม่ทราบสีไม่มีวิธีใดที่จะเปลี่ยนความทึบของเส้นขอบโดยการใช้เพียงอย่างrgba()เดียว

ลองนี้:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

และนี่คือ CSS มหัศจรรย์ของเรา

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

ตรวจสอบการสาธิตที่นี่