CSS의 글꼴과 요소에 그림자를 추가하는 방법은 무엇입니까? 텍스트 그림자 및 상자 그림자 구현

이 글에서는 CSS의 글꼴과 요소에 그림자를 추가하는 방법을 소개합니다. 텍스트 그림자 및 상자 그림자 구현. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 구문:

객체 선택기 {text-shadow:X축 오프셋 Y축 오프셋 그림자 흐림 반경 그림자 색상}

참고: 여러 투영을 사용하는 경우 text-shadow는 하나 이상의 투영을 사용할 수 있습니다. , 쉼표 ","로 구분해야 합니다.
2. 값:

box-shadow 속성은 최대 6개의 매개변수 설정을 가질 수 있으며 해당 값은 각각 다음과 같습니다.

　 (1) 그림자 가로 오프셋: 그림자 가로 오프셋을 나타내며 해당 값은 다음과 같습니다. 양수 음수 값은 양수 값과 음수 값을 모두 가질 수 있습니다. 값이 양수이면 그림자는 물체의 오른쪽에 있습니다. 그렇지 않으면 그림자는 물체의 왼쪽에 있습니다. (2) 그림자의 수직 오프셋: 그림자를 나타냅니다. 수직 오프셋: 이 매개변수는 선택 사항이지만 해당 값은 양수만 가능합니다. 값이 클수록 그림자가 흐려지고, 그렇지 않으면 그림자가 더 선명해집니다. 값이 0이면 그림자에 흐림 효과가 없음을 의미합니다.

　　(4) 그림자 색상: 이 매개변수는 선택사항입니다. 색상이 설정되지 않은 경우 브라우저는 기본 색상을 사용하지만 기본 색상은 다릅니다. 각 브라우저, 특히 웹킷 커널 아래의 Safari 및 Chrome 브라우저는 무색입니다. 즉, 이 매개변수를 생략하지 않는 것이 좋습니다.

CSS3가 나오기 전에는 텍스트 그림자를 처리하는 방법이 기본적으로 그림이었습니다. CSS3가 등장할 때까지 텍스트 그림자를 만드는 방법은 더욱 개선되었습니다. 실제로 text-shadow는 CSS2에 등장했지만 CSS2.0에서는 가차 없이 폐기되지 않았으며 이제 CSS3에서도 다시 사용됩니다. 이는 text-shadow가 여전히 우리의 관심을 끌 가치가 있음을 보여줍니다. 따라서 자격을 갖춘 프론트엔드 인력으로서 텍스트 그림자를 마스터하는 것이 최우선 과제가 되어야 합니다. CSS3는 텍스트 그림자 효과를 설정하고 텍스트 글꼴에 그림자 효과를 설정합니다. text-shadow 스타일에는 원래 CSS2 버전에 이 속성이 있었지만 CSS3에서는 텍스트 레이아웃을 풍부하게 하기 위해 text-shadow가 다시 적용되었습니다. 효과를 아름답게 합니다.

3, CSS3 단어 및 구문

CSS3 단어: text-shadow

문법 구조:

text-shadow: 5px 2px 6px black;

5px 의미: 그림자가 텍스트 왼쪽에서 5px 표시됨

2px 의미: 그림자가 2px 표시됨 텍스트에서

6px 표시: 그림자 크기 범위

검은색 표시: 그림자 색상이 검정색입니다

예:

<p class="orange" id="all"> 
    <h1>smile微笑</h1> 
</p>

　　　　 body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			.orange {				
				background-color: #f8f8f8;
				padding: 30px;				
			}
			
			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}        　　

효과는 다음과 같습니다.

요약: 위 내용은 전체 내용입니다. 이 기사가 도움을 배우는 모든 사람에게 도움이 될 수 있기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS 비디오 튜토리얼 ,

CSS3 비디오 튜토리얼

을 방문하세요!

관련 권장 사항: php 공공 복지 교육 비디오 튜토리얼

CSS 온라인 매뉴얼

CSS3 온라인 매뉴얼

div/css 그래픽 튜토리얼

위 내용은 CSS의 글꼴과 요소에 그림자를 추가하는 방법은 무엇입니까? 텍스트 그림자 및 상자 그림자 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!