CSS3의 몇 가지 새로운 기술 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 몇 가지 새로운 기술 소개

Y2J

May 11, 2018 pm 05:10 PM

css3div암호요소우리를새로운 기술그림자

웹 페이지 제작에 대한 Webjx 기사 소개: Webpage Teaching Network는 이 기사에서 CSS의 5가지 흥미로운 신기술(둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 요소 크기 조정)을 보여줍니다. CSS는 잘 알려져 있고 널리 사용되는 웹사이트 스타일 언어입니다. 버전 3(CSS3) 계획에는 시간을 절약할 수 있는 몇 가지 새로운 기능이 추가되었습니다.
Script House는 이 기사에서 둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 크기 조정 요소 등 CSS의 5가지 흥미로운 새로운 기술을 보여줍니다.
CSS는 잘 알려져 있고 널리 사용되는 웹사이트 스타일 언어입니다. 버전 3(CSS3) 계획에는 시간을 절약할 수 있는 몇 가지 새로운 기능이 추가되었습니다. 이러한 효과는 최신 브라우저 버전에서만 지원되지만 이에 대해 아는 것은 여전히 필요하고 흥미롭습니다. Script House는 이 기사에서 둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 크기 조정 요소 등 CSS의 5가지 흥미로운 새로운 기술을 보여줄 것입니다.
관련 기사: CSS3 사용을 위한 5가지 팁 소개 1: 기본 태그
CSS3의 몇 가지 새로운 기술 소개
이 튜토리얼을 시작하기 전에 튜토리얼 전체에서 사용할 기본 태그를 만들어 보겠습니다.
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 class="alignnone size-full wp-image-2157 lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/001/505/8634c49225d2d852dacdbbadecbfda3a-1.png?x-oss-process=image/resize,p_40"  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: 둥근 모서리
CSS3의 몇 가지 새로운 기술 소개
현재 둥근 모서리를 만드는 방법은 여러 가지가 있지만 모두 번거롭습니다. 가장 일반적인 방법: 먼저 모서리가 둥근 그림을 만든 다음 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 무료 동영상 튜토리얼

22 H5 및 CSS3 도움말 도구 공유

CSS3가 무엇인지 설명해주세요.

CSS3의 선택자 예시에 대한 자세한 설명

20가지 공통 CSS/CSS3 속성 통합

위 내용은 CSS3의 몇 가지 새로운 기술 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

드래그 ' 및 Droppin ' 반응에서Apr 17, 2025 am 11:52 AM

React Ecosystem은 모두 드래그 앤 드롭의 상호 작용에 중점을 둔 많은 라이브러리를 제공합니다. 우리는 React-dnd, React-beautiful-dnd를 가지고 있습니다.

빠른 소프트웨어Apr 17, 2025 am 11:49 AM

최근 빠른 소프트웨어에 대해 놀랍도록 상호 연결된 것들이있었습니다.

배경 클립이있는 중첩 된 그라디언트Apr 17, 2025 am 11:47 AM

나는 자주 배경 클립을 사용한다고 말할 수 없습니다. I ' D WART IT IT는 일상적인 CSS 작업에서 거의 사용되지 않았습니다. 그러나 나는 Stefan Judis의 게시물에서 그것을 상기시켰다.

React 후크와 함께 requestAnimationFrame 사용Apr 17, 2025 am 11:46 AM

requestAnimationFrame을 사용하여 애니메이션은 쉬워야하지만 React의 문서를 철저히 읽지 않으면 몇 가지 문제가 발생할 수 있습니다.

페이지 상단으로 스크롤해야합니까?Apr 17, 2025 am 11:45 AM

아마도이를 사용자에게 제공하는 가장 쉬운 방법은 요소의 ID를 대상으로하는 링크 일 것입니다. 그래서 ...처럼 ...

최고 (GraphQL) API는 귀하가 작성한 것입니다Apr 17, 2025 am 11:36 AM

들어보세요, 나는 GraphQL 전문가가 아니지만 함께 일하는 것을 좋아합니다. 프론트 엔드 개발자로서 데이터를 노출시키는 방법은 꽤 멋지다. 메뉴와 같습니다

주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기Apr 17, 2025 am 11:26 AM

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

테두리 반경을 보존하는 동안 상자를 확장하는 다양한 방법Apr 17, 2025 am 11:19 AM

나는 최근 코데 펜에서 흥미로운 변화를 발견했다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.