CSS filters

Previous words

CSS filter filter is used for operations such as blurring, sharpening, and discoloration of elements. It is usually applied to pictures, backgrounds, etc. This article will introduce in detail the CSS filter filter

Syntax

filter

Initial value: none

Applies to: All elements

Inheritance: None

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

Compatibility: IE browser and android4.3-browser does not support it, android4.4+ needs to be added -webkit-prefix

 [Note] Use spaces to separate multiple filters. Filters usually use percentages (such as: 75%), or they can also be expressed in decimals (such as: 0.75)

Grayscale

grayscale

By using grayscale, the image will be turned into gray. If the value is 100%, it will be completely converted to grayscale image. If the value is 0%, the image will not change. The default is 0

saturation

saturate

A value of 0% means the image is completely desaturated, and a value of 100% means the image has no change. Values ​​above 100% are allowed, indicating higher saturation. If the value is not set, the value defaults to 1

sepia

hue-rotate

invert

opacity

brightness

contrast

blur##  Set Gaussian blur to the image through blur. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are blended together on the screen, so the larger the value, the blurrier it is. If no value is set, the default is 0; this parameter can set the css length value, but does not accept percentage values

Shadow

• drop-shadow (h-shadow v-shadow blur spread color) is used to set a shadow effect on the image. Shadows are composited underneath the image and can be blurred, offset versions of the matte that can be painted in a specific color. The function accepts values ​​of type

<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>

<p class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</p>
<p class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</p>