CSS3 기본 요소 개요

이 글은 CSS 의 몇 가지 새로운 속성 (text-shadow,box-shadow, andborder-radius) 을 기본적으로 소개할 것이다.이러한 CS3 속성은 일반적으로 페이지 레이아웃을 강화하는 데 사용됩니다.
RGBA
앞의 세 값은 RGB 색상 값이고 마지막 값은 투명도 수준(0 = 투명, 1 = 불투명)입니다.
RGBA는 글꼴 색상, 경계 색상, 배경 색상, 섀도우 색상 등 색상에 적용할 수 있습니다.
Text Shadow
텍스트 그림자의 구조 순서는 x축 편이, y축 편이, 모호, 색이다.
음수 값의 x축 오프셋을 설정하여 그림자를 왼쪽으로 이동합니다.음수 값의 Y축 오프셋을 설정하여 그림자를 위로 이동합니다.음영 색상에 RGBA 값을 적용할 수 있다는 것을 잊지 마세요.
쉼표로 구분된 텍스트 섀도우 목록을 지정할 수도 있습니다.아래의 예는 두 개의 텍스트 음영 성명을 사용하여 텍스트 철판 효과 (맨 위 1px와 맨 아래 1px) 를 만들었다.

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

Border Radius
경계 반경 (border radius) 의 쓰기는 내각거리 (padding) 와 외각거리 (margin) 속성과 유사하다. (예:border-radius: 20px)브라우저가 경계 반경 속성을 렌더링하려면 속성 이름에 접두사를 붙여야 합니다. Webkit 엔진의 브라우저는'-webkit-', Firefox는'-moz-'입니다.
각 모서리에 다른 값을 지정할 수 있습니다.참고: Firefox 및 Webkit의 모서리 속성 이름은 같지 않습니다.
Box Shadow
상자 음영의 구조는 text-shadow와 같다. x축 편이, y축 편이, 모호, 색깔.
마찬가지로, 당신은 하나 이상의 상자 음영을 설정할 수 있습니다.다음은 세 개의 상자 음영 성명 예이다.

-moz-box-shadow:

-2px -2px 0 #fff,

2px 2px 0 #bb9595,

2px 4px 15px rgba(0, 0, 0, .3);

영문 원고: The Basics of CSS3 | WebDesignWall
번역정리: CSS3 기본 요소 개요|새벽
저자: 새벽출처: http://www.cnblogs.com/xiaoyao2011/어떤 형식의 전재를 환영하지만 출처를 반드시 밝혀 주십시오.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3 기본 요소 개요

좋은 웹페이지 즐겨찾기