CSS의 상자 섀도우(위)

웹 사이트를 설계할 때 가장 흥분되는 것은 box shadow를 사용하는 것이다.상자의 그림자는 간단한 화제인 것 같지만, 실제로는 매우 광범위한 화제이다.나는 내가 할 수 있는 대로 세 부분으로 나누어 총결산할 것이다.그래서 이 블로그는 상자의 그림자에 대한 기초 지식이다.
상자 그림자의 실제 용도를 알아보자.간단하게 말하면box shadow 속성은 그림자 효과를 요소의 경계에 추가합니다. 이 요소는div, 단추, 이미지 또는 다른 요소일 수 있습니다.
상자형 섀도우는 섀도우의 X 오프셋 및 Y 오프셋 값, 섀도우의 흐림 반지름, 섀도우의 확산 반지름 및 섀도우의 색상으로 구성됩니다.

box-shadow: X-offset Y-offset blur-radius spread-radius color;

단일 요소에도 여러 개의 그림자가 있을 수 있다.
상자 그림자에% 값을 사용할 수 없다는 것을 기억하십시오.

모든 것을 더 잘 알 수 있도록: -

1. X 오프셋: -
섀도우의 수평 오프셋입니다.오프셋의 양수 값은 섀도우가 요소 오른쪽에 형성되고 음수 오프셋은 요소 왼쪽에 형성됨을 나타냅니다.이 값은 선택할 수 없지만 수평 그림자를 원하지 않으면 0을 전달할 수 있습니다.

2. Y 오프셋: -
섀도우의 수직 오프셋입니다.오프셋의 양수 값은 섀도우가 요소 아래에 형성되고 음수 오프셋은 요소 위에 섀도우가 형성됨을 나타냅니다.이 값은 선택할 수 없지만 수직 음영을 원하지 않으면 0을 전달할 수 있습니다.

3. 희미한 반경: -
이 값은 그림자의 예도를 관리합니다.값이 0이면 그림자가 가장 선명하고 값이 높으면 그림자가 더 흐려집니다.그것의 마이너스는 받아들일 수 없다.이 값은 선택 사항입니다.

4. 전파 반지름: -
이 값은 섀도우의 크기를 관리합니다.만약 이 값을 전달한다면, 음영의 크기는 확산 반경이 증가함에 따라 증가하는 것을 발견할 수 있을 것이다. 이것은 음영의 확산을 증가시킨다는 것을 의미한다.음수 값을 사용하여 그림자를 줄일 수 있습니다.확산 반지름(spread radius)이 0이면 그림자의 크기가 정의되지 않은 경우 그림자의 크기는 흐림 반지름(blur radius)의 크기와 같습니다.이 값은 선택 사항입니다.

5. 색상: -
이 값을 사용하면 그림자의 색을 사용자 정의할 수 있습니다.모든 색상 값, 이름, 코드 또는 색상 단위를 전달할 수 있습니다.이 값은 선택 사항입니다.
팁: - 그림자 색상의 투명도를 정의하려면 rgba() 단위를 사용하는 것이 좋습니다.

아트:-
섀도우 측정을 정의할 때 inset 키워드를 사용하면 섀도우가 요소 내부에서 생성됩니다.내장 섀도우는 배경 위에 있는 경계 내에 그려집니다.이 값은 선택 사항입니다.

예시를 통해 더 잘 이해할 수 있도록-

# 양의 오프셋 사용 -

box-shadow: 10px 10px;

보시다시피, 우리는 양의 X 편이와 Y 편이를 사용했기 때문에, 음영은div의 밑부분과 오른쪽에 형성된다.

# 마이너스 오프셋 사용 -

box-shadow: -10px -10px;

보시다시피 우리는 음의 X 편이와 Y 편이를 사용하기 때문에 음영은div의 꼭대기와 왼쪽에 형성된다.

#반지름 흐림 사용 -

box-shadow: 10px 10px 10px;

보시다시피 우리는 희미한 반경을 사용해서 우리의 음영을 10화소까지 희미하게 했다.위의 예에서 우리는 희미한 반경을 사용하지 않았기 때문에 음영이 매우 예리하다.

# 반지름 확장 사용 -

box-shadow: 10px 10px 0px 10px;

보시다시피, 우리는 반경을 확장해서 음영의 크기를 10px 증가시켰습니다.희미한 반경이 없는 상황에서 우리는'확산반경'을 사용할 수 없기 때문에 희미한 반경의 값을 0으로 유지한다.

#색상 사용 -

box-shadow: 10px 10px blue;

보시다시피 그늘은 파란색입니다.색상 이름이나 코드 또는 다른 단위만 입력하면 모든 색상을 사용할 수 있습니다.

# 아트웍 사용 -

box-shadow: inset 10px 10px;
box-shadow: inset 10px 10px blue;

보시다시피 그림자는div에서 형성되거나,div 내부에 있다고 할 수 있습니다. 다른 예에서 사용하는 모든 속성을 부여할 수도 있습니다.

#여러 섀도우 사용 -

box-shadow: 10px 10px, -10px -10px;

보시다시피 여기는 두 개의 그림자가 형성되었다.더 잘 구분하기 위해 음영은 두 가지 다른 색깔이 있다.
첫 번째 빨간색 섀도우에서 두 오프셋 수가 양수이므로 섀도우는 위쪽과 오른쪽에 형성됩니다.
파란색의 두 번째 섀도우에서는 두 오프셋에 음수가 지정되므로 섀도우는 위쪽과 왼쪽에 형성됩니다.

#경계 반지름이 있는 섀도우 사용 -

border-radius: 10px;
box-shadow: 10px 10px;

보시다시피 여기 형성된 음영은 경계 반경 속성을 사용하여 원각을 이루는 각을 차지한다.

상자 그림자에 대한 더 많은 정보를 얻으려면 두 번째 부분을 보십시오.

텍스트 그림자 속성과 투영도 있습니다. 다른 부분에서 논의할 것입니다.

너는 CodePen에서 나의 만년필을 볼 수 있다. 나는 상자 그림자로 아주 좋은 일을 했다

본문을 읽어 주셔서 감사합니다.

어떤 피드백이 있으면 감격을 금할 수 없습니다.
또는 에 문의하십시오.