텍스트 테두리 그림자 효과 예제 공유의 HTML/CSS 프런트 엔드 구현

개발 과정에서 그림자 효과의 사용이 점점 더 널리 보급되었으므로 오늘은 동일한 기술을 사용하여 테두리 그림자를 얻는 방법에 대해 이야기하겠습니다. 아래에서는 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-ITnose

css 테두리 그림자 효과를 얻으려면_html/css_WEB-ITnose

위 내용은 텍스트 테두리 그림자 효과 예제 공유의 HTML/CSS 프런트 엔드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!