상자 그림자 효과

-3

div에 그림자를 적용하려고했지만 원하는 효과를 얻을 수 없었습니다. 엘리먼트 아래의 효과.상자 그림자 효과

예 : http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

CSS 난 그냥 당신이 제공하는 웹 사이트에서 귀하의 요구 사항을 가정

ul#nav li { 
    display: inline; 
    line-height: 40px; 
} 

/* Shadow effect */ 
.shadow-effect { 
    position: relative; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 

.shadow-effect:before, .shadow-effect:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    top: 20%; 
    bottom: 0; 
    left: 50px; 
    right: 50px; 
    -moz-border-radius: 100px/10px; 
    border-radius: 100px/10px; 
}

출처

2014-01-24 user3231901

내 브라우저 (firefox)에서 그림자를 볼 수 있기 때문에 원하는 그림자 유형의 이미지를 표시하십시오. 어떤 브라우저를 사용하고 있습니까? – Zword

코드를 요청하는 질문은 해결중인 문제에 대해 최소한의 이해를 보여 주어야합니다. 시도한 해결책, 실패한 이유 및 예상되는 결과를 포함시킵니다. 참고 항목 : Stack Overflow question checklist. –

귀하의 jsfiddle은 분명하지 않습니다. 이게 너가 찾고있는거야? http://jsfiddle.net/Ck7pG/1/ – equisde

, 나는 이것이 당신이 필요하다고 생각

DEMO

.shadow-effect { 
    position:relative;  
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px     rgba(0, 0, 0, 0.1) inset; 
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.shadow-effect:before, .shadow-effect:after { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8); 
    box-shadow:0 0 10px rgba(0,0,0,0.8); 
    top:20%; 
    bottom:0; 
    left:50px; 
    right:50px; 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
} 


.box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:100px; 
    background:#FFF; 
    margin:40px auto; 
} 


.effect6 
{ 
    position:relative;  
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.effect6:before, .effect6:after 
{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:50%; 
    bottom:0; 
    left:10px; 
    right:10px; 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
}

출처

2014-01-24 12:27:36

상자 그림자 효과

답변

관련 문제