Functions

Editing

blur([<length>radius])

가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.

설명

filterbackdrop-filter 속성에서 값으로 사용된다.

매개 변수

기본값 0px

숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

가우시안(gaussian) 함수의 표준 편차 값으로 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정한다. 따라서 값이 클수록 이미지를 더 흐리게 만든다. 음수와 백분율 값은 허용하지 않는다. 생략할 경우 기본 값은 0px이다. 보간의 초기 값은 0px이다.

  • CSS Basic User Interface Module Level 4
    <length>
Details

사용되는 단위

아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

  • cm

    1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

  • in

    1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

  • mm

    1cm의 1/10 값을 나타낸다.

  • pc

    1in의 1/16 값을 나타낸다.

  • pt

    1in의 1/72 값을 나타낸다.

  • px

    스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

  • Q

    1cm의 1/40을 나타낸다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  • cap

    대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

  • ch

    글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

  • em

    대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

  • ex

    대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

  • ic

    한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

  • lh

    요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

  • rem

    html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

  • rlh

    html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

  • Hz

    1초당 발생한 진동수를 나타낸다.

  • kHz

    1000Hz를 나타낸다.

  • fr

    그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

  • vb

    html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vh

    뷰포트 높이를 상대적으로 1% 높이를 갖는다.

  • vi

    html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

  • vmax

    vw 또는 vh 중 큰 값을 나타낸다.

  • vmin

    vw 또는 vh 중 작은 값을 나타낸다.

  • vw

    뷰포트 너비를 상대적으로 1% 폭을 갖는다.

  • dpcm

    1cm당 점(dot)의 수를 나타낸다.

  • dpi

    1in당 점(dot)의 수를 나타낸다.

  • dppx

    1픽셀(pixel)당 점(dot)의 수를 나타낸다.

  • ms

    1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

구문

filter: blur(5px);
Filter Effect Module Level 1
filter 속성의 blur 테스트

버전 명세

Modules
Module NameStatusSummary
Filter Effect Module Level 1편집자 초안

필터 효과는 화면에 표시되기 전에 요소의 렌더링을 처리하는 방식이다.


Last review date: 2022-5-30

지원 웹브라우저