CSS3의 그림자, 배경 및 둥근 테두리 스타일에 대한 간략한 소개

CSS2.1이 출시된 지 7년이 되었습니다. CSS3의 등장은 CSS2.1의 기능을 강화하고, 이미지 사용을 줄이고, HTML 페이지의 특수효과를 해결하기 위한 것입니다

현재 모바일 웹 개발에 가장 적합한 CSS3 기술의 특징은 다음과 같습니다. 🎜>

●향상된 선택기

●그림자

●강력한 배경 설정

●둥근 테두리

그림자:

현재 CSS3 스타일은 이미 그림자 스타일 효과를 지원합니다. 현재 사용할 수 있는 그림자 효과에는 텍스트 콘텐츠에 대한 그림자 효과와 요소에 대한 그림자 효과라는 두 가지 유형이 있습니다.

box-shadow

CSS3의 box-shadow 속성은 요소에 그림자 효과를 제공합니다. 구문은 다음과 같습니다.

   box-shadow:<length> <length> <length> | color:

여기서 첫 번째 길이는 가로 오프셋입니다. 두 번째 길이 값은 그림자 수직 오프셋 값입니다. 세 번째 값은 그림자 흐림 값입니다. 가로 및 세로 오프셋 값은 4px 또는 -4px와 같은 양수 및 음수 값을 사용할 수 있습니다.

현재 box-shadow는 대부분의 최신 브라우저에서 지원됩니다. 하지만 Chrome, Safari 등 Webkit 기반 브라우저에서 이 속성을 사용할 경우 -webkit-box-shadow 형식으로 속성 이름을 작성해야 합니다. Firefox 브라우저의 경우 -moz-box-shadow 형식으로 작성해야 합니다.

다음 코드는 Chrome, Safari 및 Firefox 브라우저와 호환되는 box-shadow를 사용하는 간단한 예입니다.

<style type="text/css">
        p
        {
            /* 其他浏览器 */
            box-shadow: 3px 4px 2px #000;
            /* webkit内核浏览器 */
            -webkit-box-shadow: 3px 4px 2px #000; 
            /* Firefox浏览器 */
            -moz-box-shadow: 3px 4px 2px #000;
            padding:5px 4px;
        }
    </style>

text-shadow

text-shadow 속성이 사용됩니다. 텍스트 내용의 그림자 효과 또는 흐림 효과를 설정합니다.

현재 text-shadow 속성은 Safari, Firefox, Chrome 및 Opera 브라우저에서 지원됩니다. IE8 이하 브라우저에서는 이 기능을 지원하지 않습니다. 그리고 대부분의 모바일 웹 브라우저는 잘 지원됩니다.

text-shadow의 구문은 기본적으로 box-shadow의 구문과 동일합니다.

box-shadow:d82af2074b26fcfe177e947839b5d381 d82af2074b26fcfe177e947839b5d381 >

다음 코드는 text-shadow의 간단하고 실용적인 예입니다.

 <style type="text/css">
        p
        {
            text-shadow: 5px -10px 5px red;
            color:#666;
            font-size:16px;
        }
    </style>

Background

CSS3 사양에서 CSS3는 배경 속성에 많은 새로운 기능을 추가합니다. 배경 표시 범위와 여러 이미지 배경을 모두 지원합니다. 가장 중요한 것은 속성 설정을 통해 배경색에 대한 그라데이션이나 색상 효과를 설정할 수 있다는 점이며 이는 매우 다양합니다.

CSS3에서는 배경 속성을 강화했습니다. 과거에는 다양한 페이지 수정을 위해 그림을 사용했지만 점차적으로 배경 속성으로 대체될 수 있습니다. 이러한 기능은 특히 모바일 장치 플랫폼에서 페이지 로딩 속도를 향상시키며 페이지 성능을 향상시킵니다.

배경 크기

배경 크기 속성은 배경 이미지의 크기를 설정하는 데 사용됩니다.

이 속성은 현재 Chrome, Safair 및 Opera 브라우저에서 지원되며 Android 및 IOS 플랫폼의 웹 브라우저도 지원합니다.

background-size 속성은 웹 브라우저마다 특정 구문 차이가 있습니다. Webkite 커널을 기반으로 하는 Chrome 및 Safari 브라우저에서는 -webkit-Background-size;

모바일 개발 프로젝트에서는 호환 모드 작성 방법을 사용하는 것이 좋습니다. 예는 다음과 같습니다. :

 <style type="text/css">
        p
        {
            background-size:10px 5px;
            -webkit-backgriud-size:10px 5px;
        }
    </style>

배경

배경 속성은 CSS3에서 매우 강력한 기능을 제공합니다. 매우 중요한 기능 중 하나는 여러 배경입니다. 이전에는 하나의 이미지만 사용할 수 있었지만 CSS3에서는 여러 배경 이미지를 설정할 수 있습니다. 구문은 다음과 같습니다.

  background:url(bg.jpg) left top no-repeat,
                             url(bg2.jpg) left top no-repeat;

Chrome과 Safari 브라우저 모두 background 속성을 사용하여 여러 배경 이미지를 지원합니다. Webkit 기반 브라우저이기 때문에 이 기능은 Android 및 IOS 플랫폼의 모바일 브라우저에서도 지원됩니다. 하지만 사진을 이용한 배경 설정은 모바일 웹의 전반적인 경험과 성능에 심각한 영향을 미치기 때문에, 저희는 웹킷의 기능을 이용하여 사진을 사용하는 대신 배경에 색상 그라데이션을 사용합니다. 구문은 다음과 같습니다.

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

유형 유형은 선형 그라데이션 선형 또는 방사형 그라데이션 방사형과 같은 그라데이션 유형을 나타냅니다. 다음 코드:

<style type="text/css">
        p
        {
            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
        }
</style>

둥근 테두리

둥근 모서리 효과는 CSS3에서 쉽게 얻을 수 있습니다. 코드에서 border-radius 속성을 정의하는 한 둥근 모서리 효과를 얻을 수 있습니다. .

지금까지 이 속성은 Chrome, Safari, Opera 및 Firefox 브라우저에서 지원되었습니다. 그러나 브라우저마다 작성 방법에 차이가 있습니다. 예를 들어 Chrome과 Safari 브라우저는 -webkit-border-radius를 작성해야 하며, Firefox 브라우저는 -moz-border-radius를 작성해야 합니다.

<style type="text/css">
        p
        {
             border-radius:10px 5px;
             /* Firefox浏览器 */
             -moz-border-radius:10px 5px;
             /* webkit 内核浏览器 */
             -webkit-border-radius:10px 5px;
        }
    </style>

border-radius 속성은 음수 값을 사용할 수 없다는 점에 유의해야 합니다. 그 중 하나가 0이면 해당 값에 해당하는 모서리는 직사각형이고, 그렇지 않으면 둥근 모서리입니다.

위 내용은 CSS3의 그림자, 배경 및 둥근 테두리 스타일에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!