Độ mờ viền CSS3?

Question

Có một tiền đạo CSS cách thẳng để làm cho biên giới của một phần tử bán trong suốt với một cái gì đó như:

border-opacity:0.7; 

?

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

Answer 1

Thật không may là yếu tố opacity làm cho toàn bộ phần tử (bao gồm bất kỳ văn bản) 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ẽ đưa ra một đường viền màu đỏ với 50% opacity:

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 phương pháp này là một số trình duyệt không hiểu định dạng rgba và sẽ không hiển thị bất kỳ biên giới ở tất cả nếu đây là toàn bộ khai . Giải pháp là cung cấp hai tờ khai biên giới. Việc đầu tiên với một opacity giả, và thứ hai với thực tế. Nếu một trình duyệt có khả năng, nó sẽ sử dụng thứ hai, nếu không, nó sẽ sử dụng đầu tiên.

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

Khai báo đườ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ù đồ họa dưới đường viền sẽ không chảy qua).

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

Answer 2

Không như xa như tôi biết không có gì tôi làm như thường lệ trong loại tình huống này là tạo ra một khối bên dưới với kích thước lớn hơn ((bordersize * 2) + originalsize) và làm cho nó minh bạ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> 

Answer 3

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

here's a quick example nếu bạn muốn kiểm tra.

• 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 ở tất cả 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ó this stackoverflow post, điều này gợi ý một số vấn đề khác - cụ thể là, biên giới làm cho on-top-of bất kỳ màu nền (hoặc ảnh nền) mà bạn đã chỉ định; do đó hạn chế tính hữu dụng của alpha biên giới trong nhiều trường hợp.

Answer 4

thử điều 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 có 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 Demo tại đây.

Answer 5

Nếu bạn kiểm tra mã 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 viền trong suốt qua CSS, như 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, thậm chí không cho CSS3. Tôi đã sử dụng các validator đầu vào trực tiếp với mã CSS sau,

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

Kết quả thu được,

Value Lỗi: biên giới Quá nhiều giá trị hoặc giá trị không được công nhận: 1px rgba rắn (255,0 , 0,0.5)

Đáng tiếc là giá trị alpha (chữ "a" ở cuối "rgb") không được W3C chấp nhận như một phần của giá trị màu đường 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. Vấ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 sang một bên để tạo ra một thứ gì đó trong CSS.

Để sử dụng W3C online CSS validator/Direct Input. Bạn có thể sử dụng trình xác nhận hợp lệ để kiểm tra công việc của mình, nó thực sự giúp tìm ra các lỗi nhỏ hoặc thậm chí lớn khi mã hóa khi bạn đi ngang mắt sau giờ làm việc mã hóa.

Answer 6

Nó dễ dàng, sử dụng một bóng rắn với 0 offset:

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

Ngoài ra, nếu bạn đặt border-radius để nguyên tố này, nó mang lại cho bạn biên giới khá tròn

jsFiddle Demo

Answer 7

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

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

Và sau đó CSS: (thiết lập biên giới nội dung không ai sánh kịp, chăm sóc định vị như vậy mà độ dày biên giới đang chiếm)

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

Answer 8

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

Việc luân phiên các nhóm pixel giữa màu nền trước và màu nền không giống như một đường liên tục của các điểm ảnh trong suốt một phần. 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ó bất kỳ chỉ thị cụ thể cho trình duyệt nào.