드롭 그림자 - 아니 둥근 모서리 또는 여기에서, 나는 CSS 상자 그림자 속성에 대해 읽어

그림자에 흐리게 : .one-edge-shadow : http://css-tricks.com/snippets/css/css-box-shadow/드롭 그림자 - 아니 둥근 모서리 또는 여기에서, 나는 CSS 상자 그림자 속성에 대해 읽어

나는 유사한 그림자를 사용하고 싶습니다.
문제는 그림자의 모서리가 흐리게 (그리고 둥글게) 보이기를 원하지 않는다는 것입니다.

어떻게하면됩니까? (가급적 우아하게).

편집 :
비교 이미지 : http://new.tsaviation.com/images/cpm155/drop-shadow-vs-bottom-shading.jpg

출처

2013-05-31 Samuel Fullman

당신이 이미 시도했다 우리를 게재 할 수 있습니까? 뭘 원하는거야? – funerr

글쎄, 이건 쉬운 게시물 이겠지. 다음은 비교를위한 링크입니다. http://new.tsaviation.com/images/cpm155/drop-shadow-vs-bottom-shading.jpg –

감사합니다. 귀하의 요청을 이해했다고 생각합니다. 제 대답을 참조하십시오. – funerr

내가 이해, 당신은 바닥 모서리 반경 속성이없는 바닥 그림자를 갖고 싶어에서 오른쪽?

그렇다면 기본적으로 그라데이션 배경 인 div 인 "그림자"를 "부착"할 수 있습니다.

DEMO

HTML :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <!-- Trick shadow --> 
    <div id="box"> 
    <div class="shadow-bottom"></div> 
    </div> 
</body> 
</html>

CSS :

#box{ 
    width:5em; 
    height:5em; 
    background-color:#6c6c6c; 
    margin:5em auto; 
} 

/* New shadow element */ 
.shadow-bottom{ 
    position:relative; 
    top:5em;/*height of box*/ 
    height:25%; 
    width:100%; 
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 

}

출처

2013-06-02 15:06:48 funerr

드롭 그림자 - 아니 둥근 모서리 또는 여기에서, 나는 CSS 상자 그림자 속성에 대해 읽어

답변

관련 문제