Latest web development tutorials
×

CSS manual de referência

CSS manual de referência CSS seletor CSS Referência discurso CSS Web fontes seguras CSS animação CSS unidade CSS cor CSS valores de cor legais CSS nomes de cores CSS valores de cor hexadecimais CSS Suporte a navegadores

CSS propriedade

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS3 filtro (filtro) propriedades

Exemplos

Editar todas as cores em imagens a preto e branco (100% cinza):

img {
-webkit-filtro: tons de cinza (100% ); / * Chrome, Safari, Opera * /
Filtro: escala de cinza (100%);
}

tente »

Definições e uso

atributo de filtro define os elementos (tipicamente <img>) efeitos visuais (por exemplo: distorcido e saturação).

padrão: nenhum
herança: não
suporte de Animação: Sim. Detalhes podem ser encontrados no CSS Animação
versão: CSS3
sintaxe JavaScript: objeto .style.WebkitFilter = "tons de cinza (100%)" para tentar >>

Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão do método.

Imediatamente após o número de prefixo o navegador especificado -webkit-.

propriedade
filtro 18,0 -webkit- Não suporta 35,0 6.0 -webkit- 15,0 -webkit-

Nota: navegador Explorador Older Internet (4,0 a 8,0) para apoiar a não-padrão "filtro" propriedade foi abandonada. IE8 e navegadores anteriores costumam usar opacidade propriedade.

CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Dica: Use espaços para separar vários filtros.


função de filtro

Nota: Os filtros utilizam tipicamente percentagem (por exemplo: 75%), é claro, também podem ser usados para representar um número decimal (por exemplo: 0,75).

filtro descrição
nenhum O valor padrão, nenhum efeito.
blur (px) Gaussian Blur com as configurações de imagem. "Radius" para definir um valor de função Gaussian padrão é pobre, ou o número de pixels na tela para derreter juntos, então quanto maior o valor, mais desfocada;

Se o valor não for definido, o padrão é 0, o parâmetro pode ser definido valor de comprimento css, mas não aceita valores percentuais.
brilho (%) Aplicação de uma multiplicação linear para a imagem para torná-la mais clara ou mais escura. Se o valor for 0%, a imagem é tudo preto. O valor é de 100%, sem alteração na imagem. Outros valores correspondem a linear efeito multiplicador. Valor de mais de 100% são possíveis, a imagem será mais brilhante do que o original. Se o valor não for definido, o padrão é 1.
contraste (%) Ajustar o contraste da imagem. O valor é de 0%, a imagem é tudo preto. O valor é de 100%, a imagem inalterada. Os valores podem exceder 100%, o que significa que irá utilizar um menor contraste. Se o valor não for definido, o padrão é 1.
drop-shadow (h-sombra v -shadow borrão propagação cor)

Configurar um efeito de sombra à imagem. As sombras são sintetizados na imagem abaixo, pode haver ambiguidade, uma cor específica pode desenhar a máscara diagrama versão offset. Função aceita <sombra> valor (definido no fundo CSS3) tipo, além de "inserção" palavra-chave não é permitido. A função com a propriedade box-shadow box-shadow existente é muito semelhante, exceto que, através do filtro, alguns navegadores para um melhor desempenho fornece aceleração de hardware. <shadow>参数如下:

<Offset-x> <compensando y> ( deve)
Ele é definido dois sombra compensação <length> valor. <Offset-x> Preferências distância horizontal de sombra aparece no elemento esquerdo. <Offset-y> para definir a distância vertical de queda sombra aparece acima do elemento. Veja <length> possíveis unidades.
Se ambos os valores são 0, a sombra aparece por trás dos elementos positivos (se estiver definido   <blur-radius> and/or <spread-radius>, 会有模糊效果 ).
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<blur-radius> (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个<length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。 <color> (可选)查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
em tons de cinza (%)

Converter a imagem em tons de cinza. Ele define o valor da taxa de conversão. Valor de 100% é completamente convertido para uma imagem em tons, um valor de 0% da imagem inalterada. Os valores entre 0% e 100%, o efeito multiplicador é linear. Se não for definido, o valor padrão é 0;

matiz-rotação (deg)

Aplicação à rotação da imagem matiz. imagem "Angle" ângulo anel de cor é um valor valor ajustado ajustado. Valor 0deg, a mudança de imagem. Se o valor não for definido, o valor padrão é 0deg. Embora não haja nenhum valor máximo que excede o valor do equivalente de outro 360deg perímetro.

inverter (%)

Invertendo imagem de entrada. Ele define o valor da taxa de conversão. 100% do valor é completamente invertida. Um valor de 0%, a imagem inalterada. Um valor entre 0% e 100%, o efeito multiplicador é linear. Se o valor não for definido, o valor padrão é 0.

opacidade (%)

grau de conversão de transparência da imagem. Ele define o valor da taxa de conversão. 0% é completamente transparente, e um valor de 100%, a imagem inalterada. Um valor entre 0% e 100%, o efeito multiplicador é linear, multiplicado pelo número de amostras é também equivalente à imagem. Se o valor não for definido, o valor padrão é 1. Esta função é muito semelhante à propriedade opacidade existente, excepto que através do filtro, a fim de melhorar o desempenho de alguns navegadores irá fornecer aceleração de hardware.

saturar (%)

Converte a saturação da imagem. Ele define o valor da taxa de conversão. 0% é totalmente insaturado, nenhuma mudança na imagem é de 100%. Outro valor, o efeito multiplicador é linear. Mais do que 100% do valor é permitido, existe uma saturação mais elevada. Se o valor não for definido, o valor padrão é 1.

sépia (%)

Converter a imagem para sépia. Ele define o valor da taxa de conversão. Valor de 100% é totalmente castanho escuro, é 0% da imagem inalterada. Os valores entre 0% e 100%, o efeito multiplicador é linear. Se não for definido, o valor padrão é 0;

url ()

função URL leva um arquivo XML, que define um filtro SVG, e pode incluir uma âncora para especificar um elemento de filtro específico.

Por exemplo:

filter: url(svg-url#element-id)
inicial

Propriedade é definida para os valores padrão, consulte: a palavra-chave inicial CSS

herdar Esta propriedade é herdada do elemento pai, você pode ver: o CSS a palavra-chave herdar

Exemplos

mais exemplos

exemplos distorcido

Fotos Gaussian Blur:

img {
-webkit-filtro: blur (5px) ; / * Chrome, Safari, Opera * /
Filtro: blur (5px);
}

tente »

Instância Função Brilho

Faça o mais brilhante de imagens:

img {
-webkit-filtro: brilho (200% ); / * Chrome, Safari, Opera * /
Filtro: brilho (200%);
}

tente »

Instância função de contraste

Ajustar o contraste da imagem:

img {
-webkit-filtro: contraste (200% ); / * Chrome, Safari, Opera * /
Filtro: contraste (200%);
}

tente »

exemplos de função drop-sombra

Configurar um efeito de sombra para a imagem:

img {
-webkit-filtro: drop-shadow ( 8px 8px 10px vermelho); / * Chrome, Safari, Opera * /
Filtro: drop-shadow (8px 8px 10px vermelho);
}

tente »

Instância Função tons de cinza

Converter a imagem em tons de cinza:

img {
-webkit-filtro: tons de cinza (50% ); / * Chrome, Safari, Opera * /
Filtro: tons de cinza (50%);
}

tente »

() exemplos função Matiz-rotação

Aplicações de rotação de tonalidade para a imagem:

img {
-webkit-filtro: matiz-rotação ( 90deg); / * Chrome, Safari, Opera * /
Filtro: matiz-rotação (90deg) ;
}

tente »

Instância Função Invert

Invertendo imagem de entrada:

img {
-webkit-filtro: invertido (100% ); / * Chrome, Safari, Opera * /
Filtro: invertido (100%);
}

tente »

Instância Função opacidade

grau de conversão de transparência da imagem:

img {
-webkit-filtro: opacidade (30% ); / * Chrome, Safari, Opera * /
Filtro: opacidade (30%);
}

tente »

Saturar Instância Função

Convertendo a saturação da imagem:

img {
-webkit-filtro: saturar (800% ); / * Chrome, Safari, Opera * /
Filtro: saturar (800%);
}

tente »

Instância Função Sepia

Converter imagens para sépia:

img {
-webkit-filtro: sépia (100% ); / * Chrome, Safari, Opera * /
Filtro: sépia (100%);
}

tente »

função composta

O uso de vários filtros, cada um dos filtros separados por espaços.

Nota: A ordem é muito importante (por exemplo, usando tons de cinza () antes de usar sépia () irá produzir a imagem da escala cinza completa).

img {
-webkit-filtro: contraste (200% ) de brilho (150%); / * Chrome, Safari, Opera * /
Filtro: contraste (200%) de brilho (150%);
}

tente »

Todos os exemplos de filtro

O exemplo a seguir demonstra como usar todo o filtro:

.blur {
-webkit-filtro: blur (4px) ;
Filtro: blur (4px);
}

.brightness {
-webkit-filtro: brilho (0,30) ;
Filtro: brilho (0,30);
}

.contrast {
-webkit-filtro: contraste (180% );
Filtro: contraste (180%);
}

.grayscale {
-webkit-filtro: tons de cinza (100% );
Filtro: escala de cinza (100%);
}

.huerotate {
-webkit-filtro: matiz-rotação ( 180 °);
Filtro: matiz-rotação (180 °) ;
}

.invert {
-webkit-filtro: invertido (100% );
Filtro: invertido (100%);
}

.opacity {
-webkit-filtro: opacidade (50% );
Filtro: opacidade (50%);
}

.saturate {
-webkit-filtro: saturar (7) ;
Filtro: saturar (7);
}

.sepia {
-webkit-filtro: sépia (100% );
Filtro: sépia (100%);
}

.Shadow {
-webkit-filtro: drop-shadow ( 8px 8px 10px verde);
Filtro: drop-shadow (8px 8px 10px verde);
}

tente »

artigos relacionados

HTML DOM Referência: atributos de estilo do filtro