CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)-CSS 지식-php.cn

CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)

藏色散人

풀어 주다： 2018-09-27 15:20:14

원래의

7155명이 탐색했습니다.

이 글에서는 css3 테두리 그림자 효과 의 세부 구현 방법을 주로 소개합니다.

웹 디자인에서는 그림이나 테두리 그림자 등의 효과와 입체적인 효과를 얻기 위해 주로 PS 도구를 사용합니다. 하지만 일부 기본 효과를 p-픽처로 완성해야 한다면 상대적으로 비효율적입니다.

이제 css3의 테두리 그림자 속성 의 box-shadow을 소개하겠습니다. 이 속성을 사용하면 쉽게 테두리를 구현할 수 있습니다. 그림자 효과.

css3 테두리 그림자 코드 예는 다음과 같습니다.

1 box-shadow 속성은 테두리 외부 그림자#🎜를 구현합니다. 🎜## 🎜🎜#

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS3边框阴影</title>
   <style type="text/css">
      *{margin: 0px;padding: 0px;}
      div{margin: 20px 0px;
         width: 100%;
         height: 40px;
         background: #fff;
      box-shadow:5px 5px 10px 5px #ccc;
      }
   </style>
</head>
<body>
  <div></div>
</body>
</html>

로그인 후 복사

이 HTML 코드에서는 div에 상자 그림자 스타일 속성을 추가하고 매개변수를 5px 5px 10px 5px #ccc로 설정합니다.

첫 번째 매개변수는 수평 그림자 위치를 나타냅니다.

두 번째 매개변수는 수직 그림자 위치를 나타냅니다.

세 번째 매개변수는 흐림 거리를 나타냅니다. 🎜🎜#

네 번째 매개변수는 그림자의 크기를 나타냅니다.

다섯 번째 매개변수는 그림자의 색상을 나타냅니다.
#🎜 🎜 #6번째 매개변수는 설정되지 않으며 기본값은 외부 그림자입니다.

그러면 위 코드의 최종 효과는 다음과 같습니다.

그림과 같이, 이 div 외부 그림자의 테두리를 성공적으로 설정했습니다.

CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)

참고
: box-shadow 속성은 상자에 하나 이상의 그림자를 추가합니다.

box-shadow 속성의 매개변수는 각각 가로 그림자 위치, 세로 그림자 위치, 흐림 거리, 그림자 크기, 그림자 색상, 내부 및 외부 그림자(기본값은 외부), 내부 그림자 설정( 삽입).

2. box-shadow 속성은 테두리 내에서 그림자를 구현합니다.

위의 HTML 코드를 기반으로 box-shadow를 사용하겠습니다. 스타일 속성 값을 일부 변경합니다.

box-shadow:5px 5px 10px 5px #ccc inset;

로그인 후 복사

효과는 다음과 같습니다.

그림에 표시된 대로, 테두리의 내부 그림자 효과를 div에 설정합니다.

CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)

3. 원통형 효과를 얻기 위한 상자 그림자 속성

box-shadow:0px 5px 10px 10px #ccc inset;

로그인 후 복사

여기서 수평 그림자 위치를 0픽셀로 설정하고 내부 그림자를 설정합니다. 최종 효과는 아래와 같습니다.

그림과 같이 div에 다음과 같은 내용이 표시됩니다. 원통형 효과. CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)

Note

: box-shadow 속성에서 처음 두 매개변수는 음수 값일 수 있으며 반드시 존재해야 하지만 다음 매개변수는 선택사항입니다.

이 글은 css3 테두리 그림자 효과의 구체적인 구현 방법에 대한 내용입니다. 필요한 친구들에게 도움이 되길 바랍니다!

위 내용은 CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!