CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)
- 藏色散人원래의
- 2018-09-27 15:20:157095검색
이 글에서는 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번째 매개변수는 설정되지 않으며 기본값은 외부 그림자입니다.
참고
: box-shadow 속성은 상자에 하나 이상의 그림자를 추가합니다.
box-shadow 속성의 매개변수는 각각 가로 그림자 위치, 세로 그림자 위치, 흐림 거리, 그림자 크기, 그림자 색상, 내부 및 외부 그림자(기본값은 외부), 내부 그림자 설정( 삽입).
2. box-shadow 속성은 테두리 내에서 그림자를 구현합니다.위의 HTML 코드를 기반으로 box-shadow를 사용하겠습니다. 스타일 속성 값을 일부 변경합니다. box-shadow:5px 5px 10px 5px #ccc inset;
효과는 다음과 같습니다.
3. 원통형 효과를 얻기 위한 상자 그림자 속성
box-shadow:0px 5px 10px 10px #ccc inset;
여기서 수평 그림자 위치를 0픽셀로 설정하고 내부 그림자를 설정합니다. 최종 효과는 아래와 같습니다.
그림과 같이 div에 다음과 같은 내용이 표시됩니다. 원통형 효과. 
: box-shadow 속성에서 처음 두 매개변수는 음수 값일 수 있으며 반드시 존재해야 하지만 다음 매개변수는 선택사항입니다.
이 글은 css3 테두리 그림자 효과의 구체적인 구현 방법에 대한 내용입니다. 필요한 친구들에게 도움이 되길 바랍니다!
위 내용은 CSS3 테두리 그림자 효과를 만드는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!