한 쪽을 제외한 모든 면에 CSS3 상자 그림자를 만드는 방법은 무엇입니까?

한 쪽을 제외한 CSS3 상자의 모든 면에 음영 처리

한 쪽을 제외한 요소의 모든 면에 CSS3 상자 그림자 효과를 만드는 것은 다음과 같습니다. 까다로운 작업. 다음 단계를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

1. 그림자 없는 콘텐츠를 위한 컨테이너 만들기:

그림자를 받지 않아야 하는 요소의 섹션이 있는 경우 해당 콘텐츠에 대한 컨테이너 역할을 할 div를 그 안에 만듭니다. 예를 들어 열린 탭에 그림자가 없어야 한다면 그 안에 div를 만들고 다음과 같이 스타일을 지정하세요.

<code class="css">#content_over_shadow {
    padding: 1em;
    position: relative;
    background:#fff;
}</code>

2. 컨테이너에 대한 그림자 정의:

상위 컨테이너(이 경우 #content)에서 불필요한 패딩을 제거하고 여기에 상자 그림자를 추가합니다. 그러면 열린 탭을 제외한 모든 탭 아래로 확장되는 수평 그림자 선이 생성됩니다.

<code class="css">#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888;
}</code>

3. 탭에 그림자 추가:

마지막으로 개별 탭에 그림자를 추가합니다(예: #nav li a):

<code class="css">#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888;
}</code>

위 내용은 한 쪽을 제외한 모든 면에 CSS3 상자 그림자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!