CSS3 상자 그림자 (한면에)

CSS에서 다음과 같은 그림자 효과를 얻을 수 있습니까?CSS3 상자 그림자 (한면에)

Image Shadow

그것은 이미지/DIV 이하로 할 필요가있다.

내가 지금까지 가지고이 자체 그림자하지 않을 수

-webkit-box-shadow: 0px 20px 15px -10px #999; 
-moz-box-shadow: 0px 20px 15px -10px #999; 
box-shadow: 0px 20px 15px -10px #999;

출처

2013-01-24 user1954882

체크 http://css-tricks.com/snippets/css/css-box-shadow/ – kicaj

내가 가진, I는 현재의 그림자를 달성하기 위해 동일한 코드를 사용하고 있습니다 하나의 가장자리. 내가 가진 문제는 이미지의 그림자가 바닥에 퍼지거나 흐려지지 않는다는 것입니다. – user1954882

이미지 파일에 이미지를 놓고 이미지를 오프셋 배경으로 표시하는 방법을 사용해야한다고 생각합니다. –

을 사용하고 있지만, 난 그냥 backgroundUltimate CSS Gradient Generator를 통해

background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 48%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(48%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000',GradientType=1); /* IE6-9 */

출처

2013-01-24 14:38:13 JakeGould

이것은 필터 흐림 효과와 함께 사용되는데 꽤 많은 부분이있었습니다! 고맙습니다 – user1954882

여러 상자 그림자로이 생성 가장 가까운이 가능한 한 요소에서 쉼표로 각 상자 그림자를 구분하면됩니다. 예를 들어 :이 상자의 그림자 3 그림자, 회색의 색상 오른쪽 상단에 하나를 생성합니다

box-shadow: 5px 5px 5px grey, -5px 5px 5px blue, 5px -5px 5px orange;

, 하단에 하나의 색으로 오른쪽 아래에있는 파란색의 색상 및 하나의 왼쪽 주황색.

데모가 포함 된 jsfiddle입니다.

설정을 사용하여 재생할 수 있지만 곡선을 얻기가 어렵고 이미지가 더 쉬울 수 있습니다.

출처

2013-01-24 14:56:06

-2

사용이 코드 box-shadow: 0 45px 50px -50px #000000;

출처

2013-01-24 20:24:40 Lucky

CSS3 상자 그림자 (한면에)

답변

관련 문제