CSS3 prend-il en charge les filtres ?

CSS3 prend en charge une variété de filtres. En CSS3, l'attribut filter peut être utilisé pour ajouter des effets de filtre aux éléments. Cet attribut possède plusieurs fonctions de filtre intégrées : Blur() définit le filtre de flou, Bright() définit le filtre de luminosité, Contrast() définit le filtre de contraste. grayscale() Définit les filtres de niveaux de gris, etc.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

CSS3 prend en charge de nombreux types de filtres. Grâce à l'attribut de filtre CSS3, nous pouvons créer des effets de filtre similaires à Photoshop. Par exemple, créez des effets de flou, des effets d'ombre, des effets de filtre de couleur, etc. pour les images.

Si les deux valeurs sont0 strong >, l'ombre apparaît directement derrière l'élément (si est défini <code style="font-style: normal;line-height: 1.5">615c74a270b74dd3c205031bdfc76245 et/ou <code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d,Il y aura un effet de flou).

< ; blur-radius> (facultatif)

Il s'agit de la troisième valeur de code>d82af2074b26fcfe177e947839b5d381 Plus la valeur est grande, plus l'ombre sera floue. Elle sera plus grande et plus claire. Les valeurs négatives ne sont pas autorisées. Si elles ne sont pas définies, la valeur par défaut est 0 (la bordure de l'ombre est très nette).

5e387985f926f4cd5497444dde74a02d (Facultatif)

Il s'agit de la quatrième valeur d82af2074b26fcfe177e947839b5d381 entraînera le rétrécissement de l'ombre. Si elle n'est pas définie, la valeur par défaut est 0 (l'ombre aura la même taille que l'élément

Remarque : Webkit et certains autres navigateurs ne prennent pas en charge la quatrième longueur et ne seront pas rendus si c'est le cas). ajouté.

b10fb37415d019cfffa8c4d7366c607f (facultatif)

Affichez la valeur de b10fb37415d019cfffa8c4d7366c607f Mots-clés et balises possibles. Si elle n'est pas définie, la valeur de couleur est basée sur le navigateur. Dans Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété colorcolor est appliquée. De plus, si la valeur de couleur est omise, l'ombre est transparente dans WebKit.

<code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> li> code>%

Filtre	Description
flou(px)	Définit le flou gaussien sur l'image. La valeur "rayon" définit l'écart type de la fonction gaussienne, ou le nombre de pixels fusionnés sur l'écran, donc plus la valeur est grande, plus elle est floue S'il n'y a pas de valeur définie, la valeur par défaut est 0 ; ce paramètre peut définir la valeur de longueur CSS, mais n'accepte pas les valeurs de pourcentage.
luminosité (%)	Appliquez une multiplication linéaire à l'image pour la faire apparaître plus claire ou plus sombre. Si la valeur est 0%, l'image sera complètement noire. Si la valeur est de 100 %, il n'y aura aucun changement dans l'image. D'autres valeurs correspondent à des effets multiplicateurs linéaires. Les valeurs supérieures à 100 % sont acceptables et l'image sera plus lumineuse qu'avant. Si aucune valeur n'est définie, la valeur par défaut est 1.
contraste (%)	Ajustez le contraste de l'image. Si la valeur est 0%, l'image sera complètement noire. La valeur est de 100 % et l'image reste inchangée. Les valeurs peuvent dépasser 100 %, ce qui signifie qu'une comparaison inférieure sera utilisée. Si aucune valeur n'est définie, la valeur par défaut est 1.
drop-shadow (h-shadow v-shadow blur spread color)	Définit un effet d'ombre sur l'image. Les ombres sont composées sous l'image et peuvent avoir des versions floues et décalées du cache qui peuvent être peintes dans une couleur spécifique. La fonction accepte les valeurs de type 2682287aecd16e99c4f70c025ad645ed (définies dans le contexte CSS3), sauf que le mot clé "inset" n'est pas autorisé. Cette fonction est très similaire à la propriété box-shadow box-shadow existante ; la différence est que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour de meilleures performances. <code style="font-style: normal;line-height: 1.5">2682287aecd16e99c4f70c025ad645edLes paramètres sont les suivants :<code style="font-style: normal;line-height: 1.5">2682287aecd16e99c4f70c025ad645ed参数如下： <code style="font-style: normal;line-height: 1.5"><ul> <li> <strong>8b89863bbb9a724179580669ccdd6d16</strong> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <small>(必须)</small> </li> <li>这是设置阴影偏移量的两个 d82af2074b26fcfe177e947839b5d381值. <strong>8b89863bbb9a724179580669ccdd6d16</strong> 设定水平方向距离. 负值会使阴影出现在元素左边. <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong>d82af2074b26fcfe177e947839b5d381</strong>可能的单位.<br> <strong><span style="font-family:Open Sans, sans-serif">如果两个值都是</span>0</strong>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5"> </span><code style="font-style: normal;line-height: 1.5">747111f72d266ea1b5d91cda9f8aa39e<span style="line-height: 1.5"> and/or </span><code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d，<span style="line-height: 1.5">会有模糊效果</span><span style="line-height: 1.5">).</span> <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> 747111f72d266ea1b5d91cda9f8aa39e (可选) 这是第三个code>d82af2074b26fcfe177e947839b5d381值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). 5e387985f926f4cd5497444dde74a02d (可选) 这是第四个 d82af2074b26fcfe177e947839b5d381值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).  注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。   b10fb37415d019cfffa8c4d7366c607f (可选) 查看 b10fb37415d019cfffa8c4d7366c607f该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> <code style="font-style: normal;line-height: 1.5"><ul> <li> <strong>8b89863bbb9a724179580669ccdd6d16</strong> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <small>(obligatoire)</small> </li> <li> Il s'agit du paramètre Deux valeurs d82af2074b26fcfe177e947839b5d381 pour le décalage de l'ombre <strong>8b89863bbb9a724179580669ccdd6d16</strong> Définit la distance horizontale. Les valeurs négatives font apparaître l'ombre à gauche de l'élément. . <strong><offset-y&gt ;</strong>Définit la distance verticale. Les valeurs négatives font apparaître l'ombre au-dessus de l'élément. Afficher les<strong>d82af2074b26fcfe177e947839b5d381</strong>unités possibles </li> </ul>
grayscale(	) 🎜Convertissez l'image en niveaux de gris. La valeur définit l'échelle de la conversion. Si la valeur est de 100 %, l'image sera entièrement convertie en niveaux de gris, et si la valeur est de 0 %, l'image restera inchangée. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si elle n'est pas définie, la valeur par défaut est 0 ;
hue-rotate(deg)	Appliquez une rotation de teinte à une image. La valeur « angle » définit l'angle du cercle chromatique selon lequel l'image sera ajustée. Si la valeur est 0deg, il n'y aura aucun changement dans l'image. Si la valeur n'est pas définie, la valeur par défaut est 0deg. Bien que cette valeur n'ait pas de valeur maximale, une valeur supérieure à 360 degrés équivaut à faire un nouveau tour.
invert(%)	Inversez l'image d'entrée. La valeur définit l'échelle de la conversion. 100 % de la valeur est une inversion complète. Une valeur de 0 % signifie qu'il n'y a aucun changement dans l'image. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si la valeur n'est pas définie, la valeur par défaut est 0.
opacité (%)	Convertissez la transparence de l'image. La valeur définit l'échelle de la conversion. Une valeur de 0 % signifie une transparence totale, une valeur de 100 % signifie aucune modification de l'image. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet, équivalents à multiplier le nombre d'échantillons d'image. Si la valeur n'est pas définie, la valeur par défaut est 1. Cette fonction est très similaire à l'attribut d'opacité existant, sauf que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour améliorer les performances.
saturer (%)	Convertir la saturation de l'image. La valeur définit l'échelle de la conversion. Une valeur de 0 % signifie que l'image est complètement désaturée et une valeur de 100 % signifie que l'image n'a aucun changement. D'autres valeurs sont des multiplicateurs linéaires de l'effet. Les valeurs supérieures à 100 % sont autorisées, avec une saturation plus élevée. Si la valeur n'est pas définie, la valeur par défaut est 1.
sépia (%)	Convertir l'image en sépia. La valeur définit l'échelle de la conversion. Une valeur de 100 % est entièrement sépia et une valeur de 0 % laisse l'image inchangée. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si elle n'est pas définie, la valeur par défaut est 0 ; la fonction
url()	URL accepte un fichier XML, qui définit un filtre SVG et peut contenir une ancre pour spécifier un élément de filtre spécifique. Par exemple : filter: url(svg-url#element-id)

exemple d'utilisation

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!