HTML5 실습 - CSS3의 여러 속성 text-shadow, box-shadow 및 border-radius에 대한 자세한 소개

오늘 우리 콘텐츠는 CSS3의 text-shadow, box-shadow 및 border-radius 속성을 소개합니다. 이 속성은 페이지 레이아웃을 향상시킬 수 있으며 배울 가치가 있습니다.

RGBA

처음 세 값은 각각 RBG 값을 코딩하고 마지막 값은 투명도를 나타냅니다(0은 투명, 1은 불투명).

RGBA는 글꼴 색상, 테두리 색상, 배경색, 그림자 색상 등과 같은 모든 색상 관련 속성에 사용할 수 있습니다.

텍스트 그림자

텍스트 그림자의 구조는 x-오프셋, y-오프셋, 흐림, 흐림의 순서입니다. 색상 .

x-offset에 음수 값을 설정하면 그림자 위치가 왼쪽으로 변경되고, y-offset에 음수 값을 설정하면 그림자 위치가 머리로 변경됩니다. RBGA를 사용하여 그림자의 색상을 설정할 수도 있습니다.

쉼표로 구분된 텍스트 그림자 그룹을 설정할 수 있습니다. 아래 예에서는 두 개의 텍스트 그림자(상단 1px 및 하단 1px)를 사용하여 이름에 대한 뉴스 텍스트 효과를 설정합니다.

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

테두리 반경

속성에 테두리 반경을 할당하는 편리한 작성 방법은 padding 및 margin(예: ). 일부 브라우저에서는 효과를 올바르게 렌더링하려면 속성 앞에 접두사를 추가해야 합니다. 예를 들어 웹킷 브라우저에서는 "border-radius: 20px" 접두사를 추가해야 하고, Firefox 브라우저에서는 "-webkit-' 접두사. -moz-

모서리마다 다른 반경을 설정할 수 있습니다. 웹킷과 파이어폭스 브라우저는 모서리마다 속성 이름이 다릅니다.

　

박스 섀도우

박스 섀도우의 구조는

속성과 동일합니다. , x-오프셋, y-오프셋, 흐림, 색상 순서입니다. text-shadow

상자 그림자에 다양한 효과를 설정할 수 있습니다. 예를 들어 다음 예에서는 매개변수 세트를 사용하여 효과를 설정합니다(매개변수는 쉼표로 구분됨).

아아앙

위 내용은 HTML5 실습 - CSS3의 여러 속성 text-shadow, box-shadow 및 border-radius에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!