CSS3 섀도우에 대한 자세한 설명

이번에는 CSS3 섀도우에 대한 자세한 설명을 가져왔습니다. CSS3 섀도우 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

box-shadow
매개변수:
h-shadow(필수): 가로 그림자의 위치, 음수 값 허용
v-shadow(필수): 세로 그림자의 위치, 음수 값 허용
blur(옵션): 흐림 거리
Spread(옵션): 그림자의 크기
color(옵션): 그림자의 색상
inset(옵션): 외부 그림자(아웃세트)를 내부 그림자로 변경
eg:

<style>
   .effect{
       position: relative;
       width: 800px;
       height: 200px;
       background-color: #fff;
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3)
       ,0px 0px 40px rgba(0,0,0,0.1) inset;  //水平和垂直阴影的值都设置为0，阴影会从中间发散至四周。
   }
    .effect:after,.effect:before{
        position: absolute;
        content: &#39;&#39;;
        background: #fff;
        top:50%;
        bottom:0;
        left: 10px;
        right: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
        z-index: -999;
        border-radius: 100px/10px;
   }</style><div class="effect"></div>

당신은 이 글의 사례를 읽었을 것입니다. 더 흥미로운 정보를 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!

추천 도서:

Require.js 자세한 설명

JS를 사용하여 정렬 알고리즘 구현

Javascript의 싱글톤 모드

JS에서 정규 표현식을 사용하는 방법

위 내용은 CSS3 섀도우에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!