Có thể đặt độ trong suốt trong CSS3 box-shadow không?

Có thể thiết lập độ trong suốt trên bóng hộp không?

Đây là mã của tôi:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

css

— Steven
nguồn

187

Tôi cho rằng rgba()sẽ làm việc ở đây. Xét cho cùng , trình duyệt hỗ trợ cho cả hai box-shadowvà rgba()gần như giống nhau.

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

Mở rộng đoạn mã

— BoltClock
nguồn

Làm việc cho tôi và giải quyết vấn đề lớn rằng bóng đổ dựa trên màu sắc chỉ hoạt động cho một nền nhất định, vì vậy bạn cần phải tạo kiểu lại chúng tùy thuộc vào những gì chúng sẽ qua mà thường là không thể (một div bao gồm cả ảnh và màu trắng bg, trong trường hợp bóng vẻ nhợt nhạt trên đầu trang của hình ảnh)

— jerclarke

@jeremyclarke Tôi đang gặp phải vấn đề tương tự trong đó tôi cần bóng của nút để hoạt động trên nhiều màu nền mà không cần phải xác định màu bóng duy nhất cho mỗi nền. Màu đen trong suốt hoạt động như một chiếc bóng thực sự.

— Clarus Dignus

rgba () không làm việc cho tôi, nếu tôi muốn thay đổi chrome củainput:-webkit-autofill

— Samuel

Nó luôn là Chrome, phải không.

— BoltClock

@Chris K.: Tôi e rằng bạn sẽ không thể thực hiện điều này riêng biệt với khai báo box-shadow ban đầu. Điều gần nhất bạn có thể nhận được là với các biến rgba () và CSS, nhưng điều đó có nghĩa là không hỗ trợ các màu được đặt tên và bạn phải áp dụng các biến cho chính khai báo box-shadow. background-color có một giới hạn tương tự, được đề cập ở đây . Cũng xem stackoverflow.com/questions/40010597/…

— BoltClock