개발 과정에서 그림자 효과의 사용이 점점 더 널리 보급되었으므로 오늘은 동일한 기술을 사용하여 테두리 그림자를 얻는 방법에 대해 이야기하겠습니다. 아래에서는 Script House의 편집자가 텍스트 테두리 그림자 효과를 구현하기 위한 HTML/CSS 프런트 엔드를 제공합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
1. 테두리 그림자
box-shadow 테두리 그림자
매개변수: 매개변수 1 x-shadow: 개체의 그림자 가로 오프셋 값을 설정하며 단위는 px, em 또는 백분율 등이 가능하며 음수 값도 허용됩니다. . 매개변수 2 y-shadow: 객체 그림자의 수직 오프셋 값을 설정합니다. 단위는 px, em, 백분율 등이 될 수 있습니다. 음수 값이 허용됩니다. 매개변수 3 흐림: 테두리 그림자 반경 크기를 설정하는 데 사용됩니다. 매개변수 4 확산: 반경을 확장하고 그림자의 크기를 설정합니다. 이 매개변수는 선택 사항이며 기본값은 0입니다. 매개변수 5 색상: 그림자의 색상을 설정합니다. 매개변수 6 삽입: 이 매개변수는 기본적으로 설정되지 않습니다. 기본값은 외부 그림자이고 삽입은 내부 그림자를 의미합니다.
box-shadow: x-shadow y-shadow 블러 확산 색상 삽입;
Effect 1
Effect 2
위 그림의 효과를 어떻게 얻을 수 있나요?
HTML 구조 CSS 스타일 글꼴 스타일 글꼴 색상 테두리 그림자 특정 코드를 살펴보겠습니다.
HTML:
<p class="box">box-shadow</p>
CSS:
.box{ width:300px; height:150px; background: deepskyblue; font:30px/150px 'Microsoft YaHei'; color: #fff; font-weight: bold; text-align: center; margin:100px auto; /*边框阴影*/ /*效果1*/ box-shadow: inset 5px 5px 20px #ccc; /*效果2*/ box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000; }
관련 권장 사항:
CSS3의 box-shadow 속성을 사용하여 생성하는 방법 테두리 그림자 효과css3 둥근 테두리, 테두리 Shadow_html/css_WEB-ITnosecss 테두리 그림자 효과를 얻으려면_html/css_WEB-ITnose위 내용은 텍스트 테두리 그림자 효과 예제 공유의 HTML/CSS 프런트 엔드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!