CSS3의 몇 가지 새로운 기술 소개
- Y2J원래의
- 2018-05-11 17:10:553527검색
웹 페이지 제작에 대한 Webjx 기사 소개: Webpage Teaching Network는 이 기사에서 CSS의 5가지 흥미로운 신기술(둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 요소 크기 조정)을 보여줍니다.
CSS는 잘 알려져 있고 널리 사용되는 웹사이트 스타일 언어입니다. 버전 3(CSS3) 계획에는 시간을 절약할 수 있는 몇 가지 새로운 기능이 추가되었습니다.
Script House는 이 기사에서 둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 크기 조정 요소 등 CSS의 5가지 흥미로운 새로운 기술을 보여줍니다.
CSS는 잘 알려져 있고 널리 사용되는 웹사이트 스타일 언어입니다. 버전 3(CSS3) 계획에는 시간을 절약할 수 있는 몇 가지 새로운 기능이 추가되었습니다. 이러한 효과는 최신 브라우저 버전에서만 지원되지만 이에 대해 아는 것은 여전히 필요하고 흥미롭습니다. Script House는 이 기사에서 둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 크기 조정 요소 등 CSS의 5가지 흥미로운 새로운 기술을 보여줄 것입니다.
관련 기사: CSS3 사용을 위한 5가지 팁 소개
1: 기본 태그 
이 튜토리얼을 시작하기 전에 튜토리얼 전체에서 사용할 기본 태그를 만들어 보겠습니다.
xHTML에는 다음 p 요소가 필요합니다.
#round, 둥근 모서리를 얻으려면 CSS3 코드를 사용하세요.
#인디, 개별적으로 둥근 모서리를 사용하세요.
#opacity는 불투명도를 구현하는 새로운 CSS3 방식을 보여줍니다.
#shadow는 Photoshop을 사용하지 않고 CSS3를 사용하여 그림자 효과를 얻는 방법을 보여줍니다.
#resize, 일부 CSS를 사용하여 크기 조정 효과를 얻는 방법을 보여줍니다.
요약하면 xHTML은 다음과 같아야 합니다.
<!DOCTYPE html PUBLIC “-// W3C // DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xml ns=”http://www.w3.org/1999/xhtml”> < head > <meta http-equiv=”Content-Type” content=”text/html; char set =utf-8″ /> <title>An Introduction to CSS3; A Nettuts Tutorial</title> <link href=”style.css” rel=”stylesheet” type=”text/css” /> </head> <body> <p id=”wrapper”> <p id=”round”> </p> <p id=”indie”> </p> <p id=”opacity”> </p> <p id=”shadow”> </p> <p id=”resize”> <img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″> </p> </p> </body> </html>
기본 CSS 파일을 생성해 보겠습니다.
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
p {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}위에서 볼 수 있듯이 각 p 요소에는 너비와 높이가 300px로 지정됩니다. , 왼쪽에 떠 있도록 하여 나중에 작업에서 스타일을 추가할 수 있도록 전체 페이지의 p를 남겨둡니다. 이 정보를 보면 해당 기사가 Script House www.jb51.net에서 가져온 것입니다. 기사가 불완전한 경우 Script House jb51.net으로 이동하여 찾아보세요!
2: 둥근 모서리 
현재 둥근 모서리를 만드는 방법은 여러 가지가 있지만 모두 번거롭습니다. 가장 일반적인 방법: 먼저 모서리가 둥근 그림을 만든 다음 html 요소를 많이 만들고 배경 이미지 둥근 모서리를 표시합니다. 당신과 나는 구체적인 과정을 아주 잘 알고 있습니다. 이 문제는 CSS3에서 "border-radius"라는
속성을 사용하여 쉽게 해결할 수 있습니다. 먼저 검정색 p 요소를 만들고 여기에 검정색 테두리를 설정합니다. 테두리는 "border-radius" 속성의 효과를 얻기 위한 전제 조건입니다. 이렇게:
#round {
background-color: #000;
border: 1px solid #000;
}이제 p 요소를 만들었으므로 예상한 대로 높이가 300픽셀이고 각진 검정색입니다. 이제 둥근 모서리를 구현하는 코드를 추가해 보겠습니다. 이는 매우 간단하며 코드 두 줄만 필요합니다. #round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}여기서 두 개의 유사한 코드 줄을 추가했습니다. Firefox 브라우저의 경우 -moz-, Safari/Chrome 브라우저의 경우 -webkit-입니다. 참고: 현재까지
IE 브라우저에서는 border-radius 속성을 지원하지 않으므로 IE에서 둥근 모서리 효과를 적용하려면 둥근 모서리를 별도로 추가해야 합니다. border-radius 속성을 문자 그대로 번역하면 Photoshop과 마찬가지로 값이 클수록 둥근 모서리가 커집니다.
위 내용은 CSS3의 몇 가지 새로운 기술 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!