Đường viền và nền hiển thị dưới dạng các màu khác nhau ngay cả khi các giá trị màu giống nhau trong CSS

Question

Có thể làm cho màu của đường viền giống như màu nền không? Trong ví dụ của tôi, nó phải có cùng màu nhưng màu đường viền luôn tối hơn màu nền.

.box { 
 
    min-width: 50px; 
 
    background: rgba(0, 0, 0, .2); 
 
    border: 10px solid rgba(0, 0, 0, .2); 
 
}

<div class="box">foo</div>

Answer 1

Bạn nên xác định background-clip: padding-box; (hoặc content-box) bởi vì, theo mặc định, tài sản này được thiết lập để border-box do đó nền cũng bao gồm các diện tích dưới đường biên giới. Hiệu ứng bạn đang có được thực sự là do sự chồng chéo trong suốt (với một màu đồng nhất, bạn sẽ không nhận thấy vấn đề), vì vậy đó là lý do bạn nhìn thấy đường viền tối hơn một chút so với màu nền

.box { 
 
    min-width: 50px; 
 
    background: rgba(0, 0, 0, .2); 
 
    background-clip: padding-box; 
 
    border: 10px solid rgba(0, 0, 0, .2); 
 
}

<div class="box">foo</div>

Answer 2

Ngoài fcalderan của câu trả lời, bạn cũng có thể làm cho border-color minh bạch để màu nền của div đơn giản là đi qua:

.box { 
 
    min-width: 50px; 
 
    background: rgba(0, 0, 0, .2); 
 
    border: 10px solid transparent; 
 
}

<div class="box">foo</div>

Answer 3

bạn không cần phải viết thêm bất kỳ dòng

.box { 
 
    min-width: 50px; 
 
    background: rgba(0, 0, 0, .2); 
 
    border:10px solid rgba(0, 0, 0, .0); 
 
}

<div class="box">foo</div>

Answer 4

Hoặc nó có thể là một quyết định - chỉ cần bắt chước biên giới của bạn bằng hộp bóng

.box { 
    min-width: 50px; 
    background: rgba(0, 0, 0, .2); 
    box-shadow:0 0 0 10px rgba(0, 0, 0, .2) 
}