CSS3 box-shadow에서 투명도를 설정할 수 있습니까?

상자 그림자에 투명도를 설정할 수 있습니까?

이것은 내 코드입니다.

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

css

— 스티븐
소스

187

rgba()여기서 일할 것 같아요 . 결국, 모두를위한 브라우저 지원 box-shadow과는 rgba()거의 동일합니다.

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

스 니펫 확장

— BoltClock
소스

나를 위해 일했고 색상 기반 그림자가 주어진 배경에서만 작동한다는 엄청난 문제를 해결 했으므로 종종 불가능한 대상 (사진과 흰색을 모두 포함하는 div)에 따라 스타일을 다시 지정해야합니다. BG가있는 경우 그림자 보이는) 사진의 상단에있는 옅은

— jerclarke

@jeremyclarke 각 배경에 대해 고유 한 그림자 색상을 정의 할 필요없이 여러 배경 색상에서 작업하기 위해 단추의 그림자가 필요한 동일한 문제가 발생했습니다. 투명한 검정색은 진정한 그림자처럼 작동합니다.

— Clarus Dignus 2015

크롬을 바꾸고 싶다면 rgba ()가 작동하지 않습니다input:-webkit-autofill

— Samuel

항상 Chrome입니다.

— BoltClock

@Chris K .: 원래의 box-shadow 선언과 별도로이 작업을 수행 할 수 없을 것 같습니다. 얻을 수있는 가장 가까운 방법은 rgba () 및 CSS 변수를 사용하는 것이지만 이는 이름이 지정된 색상을 지원하지 않는다는 것을 의미하며 변수를 box-shadow 선언 자체에 적용해야합니다. background-color에는 여기에 설명 된 유사한 제한이 있습니다 . stackoverflow.com/questions/40010597/…

— BoltClock