Bạn có thể thiết lập độ mờ đường viền trong CSS không?

Có cách CSS thẳng nào để làm cho đường viền của một phần tử bán trong suốt với thứ gì đó như thế này không?

border-opacity: 0.7;

Nếu không, có ai có ý tưởng làm thế nào tôi có thể làm như vậy mà không sử dụng hình ảnh không?

Thật không may, opacityphần tử làm cho toàn bộ phần tử (bao gồm bất kỳ văn bản nào) bán trong suốt. Cách tốt nhất để làm cho đường viền bán trong suốt là với định dạng màu rgba. Ví dụ: điều này sẽ tạo đường viền màu đỏ với độ mờ 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 */
}

Vấn đề với cách tiếp cận này là một số trình duyệt không hiểu rgbađịnh dạng và sẽ không hiển thị bất kỳ đường viền nào nếu đây là toàn bộ khai báo. Giải pháp là cung cấp hai tờ khai biên giới. Cái đầu tiên với độ mờ giả, và cái thứ hai với thực tế. Nếu một trình duyệt có khả năng, nó sẽ sử dụng cái thứ hai, nếu không, nó sẽ sử dụng cái thứ nhất.

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 */
}

Tuyên bố đường viền đầu tiên sẽ có màu tương đương với đường viền màu đỏ đục 50% trên nền trắng (mặc dù bất kỳ đồ họa nào dưới đường viền sẽ không bị chảy qua).

CẬP NHẬT: Tôi đã thêm "clip-clip: padding-box;" với câu trả lời này (theo gợi ý của SooDesuNe trong các bình luận) để đảm bảo đường viền vẫn trong suốt ngay cả khi áp dụng màu nền vững chắc.

Thật dễ dàng, sử dụng một bóng tối với độ lệch 0:

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

Ngoài ra, nếu bạn đặt bán kính đường viền cho thành phần, nó sẽ cung cấp cho bạn các đường viền tròn khá

Trình diễn jsFiddle

Như những người khác đã đề cập: CSS-3 nói rằng bạn có thể sử dụng rgba(...)cú pháp để chỉ định màu đường viền với giá trị độ mờ (alpha).

đây là một ví dụ nhanh nếu bạn muốn kiểm tra nó

• Nó hoạt động trong Safari và Chrome (có thể hoạt động trong tất cả các trình duyệt webkit).

• Nó hoạt động trong Firefox

• Tôi nghi ngờ rằng nó hoạt động hoàn toàn trong IE, nhưng tôi nghi ngờ rằng có một số bộ lọc hoặc hành vi sẽ làm cho nó hoạt động.

Ngoài ra còn có bài đăng stackoverflow này , gợi ý một số vấn đề khác - cụ thể là đường viền hiển thị trên đầu trang của bất kỳ màu nền (hoặc hình nền) nào mà bạn đã chỉ định; do đó hạn chế tính hữu dụng của alpha biên trong nhiều trường hợp.

Nếu bạn kiểm tra mã hóa CSS bằng trình xác nhận W3C, bạn sẽ thấy mã CSS của mình có được chấp nhận hay không, ngay cả khi nó hoạt động trong các trình duyệt chính.

Tạo đường viền trong suốt thông qua CSS, như được viết ở trên,

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

không được chấp nhận bởi các tiêu chuẩn W3C, ngay cả đối với CSS3. Tôi đã sử dụng trình xác nhận nhập trực tiếp với mã CSS sau,

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

Kết quả là,

Lỗi giá trị: viền Quá nhiều giá trị hoặc giá trị không được nhận dạng: rpxba 1px (255,0,0,0,5)

Thật không may là giá trị alpha (chữ "a" ở cuối "rgb") không được W3C chấp nhận như là một phần của các giá trị màu viền. Tôi tự hỏi tại sao nó không được tiêu chuẩn hóa, vì nó hoạt động trong tất cả các trình duyệt. Khó khăn duy nhất là liệu bạn có muốn tuân theo các tiêu chuẩn W3C hay bước ra khỏi nó để tạo ra một cái gì đó trong CSS.

Để sử dụng trình xác nhận CSS trực tuyến / Nhập trực tiếp của W3C .

Luôn luôn là một ý tưởng tốt để sử dụng trình xác nhận để kiểm tra công việc của bạn, nó thực sự giúp tìm ra các lỗi nhỏ hoặc thậm chí lớn trong mã hóa khi bạn lác mắt sau nhiều giờ làm việc mã hóa.

* Không xa như tôi biết, không có gì tôi làm bình thường trong trường hợp này là tạo một khối bên dưới với kích thước lớn hơn ((viền * 2) + gốc) và làm cho nó trong suốt bằng cách sử dụng

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

đây là một ví dụ

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

Cập nhật:

Câu trả lời này đã lỗi thời, vì sau tất cả câu hỏi này đã hơn 8 tuổi. Ngày nay, tất cả các trình duyệt cập nhật đều hỗ trợ rgba, bóng hộp, v.v. Nhưng đây là một ví dụ điển hình như cách đây hơn 8 năm.

Là một giải pháp thay thế có thể hoạt động trong một số trường hợp: thay đổi border-stylethành dotted.

Có các nhóm pixel xen kẽ giữa màu nền trước và màu nền không giống như một dòng pixel trong suốt liên tục. Mặt khác, điều này đòi hỏi CSS ít hơn đáng kể và nó tương thích hơn nhiều trên mọi trình duyệt mà không cần bất kỳ chỉ thị cụ thể nào của trình duyệt.

Các câu trả lời khác liên quan đến khía cạnh kỹ thuật của vấn đề về độ mờ biên giới, trong khi tôi muốn trình bày một bản hack (chỉ CSS và HTML thuần túy). Về cơ bản tạo div div container, có div div và sau đó là div nội dung.

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

Và sau đó là CSS: (đặt đường viền nội dung thành không, chú ý đến việc định vị sao cho độ dày đường viền được tính)

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

Không, không có cách nào để chỉ đặt độ mờ của đường viền bằng css.

Ví dụ: nếu bạn không biết màu sắc , không có cách nào để chỉ thay đổi độ mờ của đường viền bằng cách sử dụng đơn giản rgba().

thử cái này:

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

Và đây là CSS huyền diệu của chúng tôi ..

* {
  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;
}

Kiểm tra bản Demo tại đây.