CSS Image Filter Effects

粉丝

4小时前4小时

行政经理

CSS Image Filter Effects

CSS Filters

The CSS filter property is used to add visual effects (like blur and saturation) to elements.

Within the filter property, you can use the following CSS functions:

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

The CSS blur() Function

The blur() filter function applies a blur effect to an element. A larger value will create more blur.

If no value is specified, 0 is used (no effect).

Example

Apply different blur effects to <img> elements:

#img1 {
filter: blur(2px);
}

#img2 {
filter: blur(6px);
}

Try it Yourself »

The CSS brightness() Function

The brightness() filter function adjusts the brightness of an element.

100% is default, and represents the original brightness
Values over 100% will provide brighter results
Values under 100% will provide darker results
0% will make the image completely black

Example

Make an image brighter and darker than the original:

#img1 {
filter: brightness(150%);
}

#img2 {
filter: brightness(50%);
}

Try it Yourself »

The CSS contrast() Function

The contrast() filter function adjusts the contrast of an element.

100% is default, and represents the original contrast
Values over 100% increases the contrast
Values under 100% decreases the contrast
0% will make the image completely gray

Example

Increase and decrease the contrast for an image:

#img1 {
filter: contrast(150%);
}

#img2 {
filter: contrast(50%);
}

Try it Yourself »

The CSS drop-shadow() Function

The drop-shadow() filter function applies a drop-shadow effect to an image.

Example

Add different drop-shadow effects to an image:

#img1 {
filter: drop-shadow(8px 8px 10px gray);
}

#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}

Try it Yourself »

The CSS grayscale() Function

The grayscale() filter function converts an image to grayscale.

100% (or 1) will make the image completely grayscale
0% (or 0) will have no effect

Example

Set various grayscale for an image:

#img1 {
filter: grayscale(1);
}

#img2 {
filter: grayscale(60%);
}

#img3 {
filter: grayscale(0.4);
}

Try it Yourself »

The CSS hue-rotate() Function

The hue-rotate() filter function applies a color rotation to an element.

This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image.

Example

Set various color rotations for an image:

#img1 {
filter: hue-rotate(200deg);
}

#img2 {
filter: hue-rotate(90deg);
}

#img3 {
filter: hue-rotate(-90deg);
}

Try it Yourself »

The CSS invert() Function

The invert() filter function inverts the color of an image.

100% (or 1) will fully invert the colors
0% (or 0) will have no effect

Example

Invert the colors of an image:

#img1 {
filter: invert(0.3);
}

#img2 {
filter: invert(70%);
}

#img3 {
filter: invert(100%);
}

Try it Yourself »

The CSS opacity() Function

The opacity() filter function applies an opacity effect to an element.

100% (or 1) will have no effect
50% (or 0.5) will make the element 50% transparent
0% (or 0) will make the element completely transparent

Example

Set various opacity for an image:

#img1 {
filter: opacity(80%);
}

#img2 {
filter: opacity(50%);
}

#img3 {
filter: opacity(0.2);
}

Try it Yourself »

The CSS saturate() Function

The saturate() filter function adjusts the saturation (color intensity) of an element.

100% (or 1) will have no effect
0% (or 0) will make the element completely unsaturated
200% (or 2) will make the element super saturated

Example

Set various saturations for an image:

#img1 {
filter: saturate(0);
}

#img2 {
filter: saturate(100%);
}

#img3 {
filter: saturate(200%);
}

Try it Yourself »

The CSS sepia() Function

The sepia() filter function converts an image to a sepia tone (a warmer, more brown/yellow color).

0% (or 0) will have no effect
100% (or 1) applies full sepia effect

Example

Set various sepia for an image:

#img1 {
filter: sepia(1);
}

#img2 {
filter: sepia(60%);
}

#img3 {
filter: sepia(0.4);
}

Try it Yourself »

CSS Filter Functions

The following table lists the CSS filter functions:

Function	Description
blur()	Applies a blur effect to an element
brightness()	Adjusts the brightness of an element
contrast()	Adjusts the contrast of an element
drop-shadow()	Applies a drop-shadow effect to an image
grayscale()	Converts an image to grayscale
hue-rotate()	Applies a color rotation to an element
invert()	Inverts the color of an image
opacity()	Applies an opacity effect to an element
saturate()	Adjusts the saturation (color intensity) of an element
sepia()	Converts an image to sepia

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS Browser Support Reference
CSS Browser Support Reference

Cavalry发布主题在教程

CSS Browser Support Reference CSS Reference With Browser Support The table below lists all CSS properties and how each property is supported in the different browsers: The number to the right of the browser icon indicates in which browser version the property was first supported. Property Edge Firefox Chrome Safari Opera A accent-color 93 92 93 15.4 79 align-content 16 52 57 10.1 44 align-items 16 52 57 10.1 44 align-self 16 52 57 10.1 44 all 79 27 37 9.1 24 animation 10 16 43 9 30 animation-delay 10 16 43 9 30 animation-direction 10 16 43 9 30 animation-duration 10 16 43 9 30 animation-fill-mode 10 16 43 9 30 animation-iteration-count 10 16 43 9 30 animation-name 10 16 43 9 30 animation-play-state 10 16 43 9 30 animation-timing-function 10 16 43 9 30 aspect-ratio 88 89 88 15 74 B backdrop-filter 79 103 76 9 63 backface-visibility 12 16 36 15.4 23 background 4 1 1 1 3.5 background-attachment 4 1 1 1 3.5 background-blend-mode 79 30 35 7.1 22 background-clip 9 4 4 3 10.5 background-color 4 1 1 1 3.5 background-image 4 1 1 1 3.5 background-origin 9 4 4 3 10.5 background-position 4 1 1 1 3.5 background-position-x 12 49 1 1 15 background-position-y 12 49 1 1 15 background-repeat 4 1 1 1 3.5 background-size 9 4 4 4.1 10 block-size 79 41 57 12.1 44 border 4 1 1 1 3.5 border-block 87 66 87 14.1 73 border-block-color 87 66 87 14.1 73 border-block-end 79 41 69 12.1 56 border-block-end-color 79 41 69 12.1 56 border-block-end-style 79 41 69 12.1 56 border-block-end-width 79 41 69 12.1 56 border-block-start 79 41 69 12.1 56 border-block-start-color 79 41 69 12.1 56 border-block-start-style 79 41 69 12.1 56 border-block-start-width 79 41 69 12.1 56 border-block-style 87 66 87 14.1 73 border-block-width 87 66 87 14.1 73 border-bottom 4 1 1 1 3.5 border-bottom-color 4 1 1 1 3.5 border-bottom-left-radius 9 4 5 5 10.5 border-bottom-right-radius 9 4 5 5 10.5 border-bottom-style 5.5 1 1 1 9.2 border-bottom-width 4 1 1 1 3.5 border-collapse 5 1 1 1.2 4 border-color 4 1 1 1 3.5 border-end-end-radius 89 66 89 15 75 border-end-start-radius 89 66 89 15 75 border-image 11 15 16 6 15 border-image-outset 11 15 15 6 15 border-image-repeat 11 15 15 6 15 border-image-slice 11 15 15 6 15 border-image-source 11 15 15 6 15 border-image-width 11 13 15 6 15 border-inline 87 66 87 14.1 73 border-inline-color 87 66 87 14.1 73 border-inline-end 79 41 69 12.1 56 border-inline-end-color 79 41 69 12.1 56 border-inline-end-style 79 41 69 12.1 56 border-inline-end-width 79 41 69 12.1 56 border-inline-start 79 41 69 12.1 56 border-inline-start-color 79 41 69 12.1 56 border-inline-start-style 79 41 69 12.1 56 border-inline-start-width 79 41 69 12.1 56 border-inline-style 87 66 87 14.1 73 border-inline-width 87 66 87 14.1 73 border-left 4 1 1 1 3.5 border-left-color 4 1 1 1 3.5 border-left-style 5.5 1 1 1 9.2 border-left-width 4 1 1 1 3.5 border-radius 9 4 5 5 10.5 border-right 4 1 1 1 3.5 border-right-color 4 1 1 1 3.5 border-right-style 5.5 1 1 1 9.2 border-right-width 4 1 1 1 3.5 border-spacing 8 1 1 1 4 border-start-end-radius 89 66 89 15 75 border-start-start-radius 89 66 89 15 75 border-style 4 1 1 1 3.5 border-top 4 1 1 1 3.5 border-top-color 4 1 1 1 3.5 border-top-left-radius 9 4 5 5 10.5 border-top-right-radius 9 4 5 5 10.5 border-top-style 5.5 1 1 1 9.2 border-top-width 4 1 1 1 3.5 border-width 4 1 1 1 3.5 bottom 5 1 1 1 6 box-decoration-break 79 32 22 6.1 15 box-shadow 9 4 10 5.1 10.5 box-sizing 8 29 10 5.1 9.5 break-after 10 65 50 10 37 break-before 10 65 50 10 37 break-inside 10 65 50 10 37 C caption-side 8 1 1 1 4 caret-color 79 53 57 11.1 44 @charset 12 1.5 2 4 9 clear 5 1 1 1 6 clip 8 1 1 1 7 clip-path 79 3.5 55 9.1 42 color 3 1 1 1 3.5 color-scheme 81 96 81 13 68 column-count 10 52 50 9 37 column-fill 10 52 50 10 37 column-gap 84 63 84 14.1 70 column-rule 10 52 50 9 37 column-rule-color 10 52 50 9 37 column-rule-style 10 52 50 9 37 column-rule-width 10 52 50 9 37 column-span 10 71 50 9 37 column-width 10 52 50 9 37 columns 10 52 50 9 37 @container 105 110 105 16 91 content 8 1 1 1 4 counter-increment 8 2 4 3.1 9.6 counter-reset 8 2 4 3.1 9.6 counter-set 85 68 85 17.2 71 @counter-style 91 33 91 17 77 cursor 5.5 4 5 5 9.6 D direction 5.5 1 2 1.3 9.2 display 8 3 4 3.1 7 E empty-cells 8 1 1 1.2 4 F filter 13 35 53 9.1 40 flex 11 28 29 9 17 flex-basis 11 28 29 9 17 flex-direction 11 28 29 9 17 flex-flow 11 28 29 9 17 flex-grow 11 28 29 9 17 flex-shrink 11 28 29 9 17 flex-wrap 11 28 29 9 17 float 4 1 1 1 7 font 4 1 1 1 3.5 @font-face 9 3.5 4 3.1 10 font-family 4 1 1 1 3.5 font-feature-settings 10 34 48 9.1 35 @font-feature-values 34 font-kerning 79 34 33 9.1 20.1 font-language-override 34 @font-palette-values 101 107 101 15.4 87 font-size 5.5 1 1 1 7 font-size-adjust 127 3 127 17 113 font-stretch 9 9 48 11 35 font-style 4 1 1 1 7 font-synthesis 97 34 97 10 83 font-variant 4 1 1 1 3.5 font-variant-alternates 111 34 111 9.1 97 font-variant-caps 79 34 52 9.1 39 font-variant-east-asian 79 34 63 9.1 50 font-variant-ligatures 79 34 34 9.1 21 font-variant-numeric 79 34 52 9.1 39 font-variant-position 117 34 117 9.1 103 font-weight 4 1 2 1.3 3.5 G gap 84 63 84 14.1 70 grid 10 52 57 10 44 grid-area 10 52 57 10 44 grid-auto-columns 10 52 57 10 44 grid-auto-flow 10 52 57 10 44 grid-auto-rows 10 52 57 10 44 grid-column 10 52 57 10 44 grid-column-end 10 52 57 10 44 grid-column-start 10 52 57 10 44 grid-row 10 52 57 10 44 grid-row-end 10 52 57 10 44 grid-row-start 10 52 57 10 44 grid-template 10 52 57 10 44 grid-template-areas 10 52 57 10 44 grid-template-columns 10 52 57 10 44 grid-template-rows 10 52 57 10 44 H hanging-punctuation height 4 1 1 1 7 hyphens 79 43 55 17 44 hyphenate-character 106 98 106 17 92 I image-rendering 79 65 41 10 28 @import 5.5 1 1 1 3.5 initial-letter 110 110 9 96 inline-size 79 41 57 12.1 44 inset 87 66 87 14.1 73 inset-block 87 63 87 14.1 73 inset-block-end 87 63 87 14.1 73 inset-block-start 87 63 87 14.1 73 inset-inline 87 63 87 14.1 73 inset-inline-end 87 63 87 14.1 73 inset-inline-start 87 63 87 14.1 73 isolation 79 36 41 7.1 30 J justify-content 11 28 29 9 17 justify-items 16 45 57 10.1 44 justify-self 16 45 57 10.1 44 K @keyframes 10 16 43 9 30 L @layer 99 97 99 15.4 86 left 5.5 1 1 1 5 letter-spacing 4 1 1 1 3.5 line-break 14 69 58 11 45 line-height 4 1 1 1 7 list-style 4 1 1 1 7 list-style-image 4 1 1 1 7 list-style-position 4 1 1 1 3.5 list-style-type 4 1 1 1 3.5 M margin 6 1 1 1 3.5 margin-block 87 66 87 14.1 73 margin-block-end 87 41 87 12.1 73 margin-block-start 87 41 87 12.1 73 margin-bottom 6 1 1 1 3.5 margin-inline 87 66 87 14.1 73 margin-inline-end 87 41 87 12.1 73 margin-inline-start 87 41 87 12.1 73 margin-left 6 1 1 1 3.5 margin-right 6 1 1 1 3.5 margin-top 6 1 1 1 3.5 marker 80 72 80 13.1 67 marker-end 80 72 80 13.1 67 marker-mid 80 72 80 13.1 67 marker-start 80 72 80 13.1 67 mask 120 53 120 15.4 106 mask-clip 120 53 120 15.4 106 mask-composite 120 53 120 15.4 106 mask-image 120 53 120 15.4 15 mask-mode 120 53 120 15.4 106 mask-origin 120 53 120 15.4 106 mask-position 120 53 120 15.4 106 mask-repeat 120 53 120 15.4 106 mask-size 120 53 120 15.4 106 mask-type 79 35 24 7 15 max-block-size 79 41 57 12.1 44 max-height 7 1 1 2 7 max-inline-size 79 41 57 12.1 44 max-width 7 1 1 2 7 @media 9 3.5 21 4 9 min-block-size 79 41 57 12.1 44 min-inline-size 79 41 57 12.1 44 min-height 7 1 1 2 4 min-width 7 1 1 2 4 mix-blend-mode 79 32 41 8 35 N @namespace 12 1 1 1 8 O object-fit 16 36 31 7.1 19 object-position 16 36 31 7.1 19 offset 79 72 55 16 42 offset-anchor 116 72 116 16 102 offset-distance 79 72 55 16 42 offset-path 79 72 55 15.4 45 offset-position 116 122 116 16 102 offset-rotate 79 72 56 16 43 opacity 9 2 4 3.1 9 order 11 28 29 9 17 orphans 8 25 3.1 10 outline 8 1.5 1 1.2 7 outline-color 8 1.5 1 1.2 7 outline-offset 15 3.5 4 3 10.5 outline-style 8 1.5 1 1.2 7 outline-width 8 1.5 1 1.2 7 overflow 4 1 1 1 7 overflow-anchor 79 66 56 43 overflow-wrap 18 49 23 6.1 12.1 overflow-x 9 3.5 4 3 9.5 overflow-y 9 1.5 4 3 9.5 overscroll-behavior 18 59 63 16 50 overscroll-behavior-block 79 73 77 16 64 overscroll-behavior-inline 79 73 77 16 64 overscroll-behavior-x 18 59 63 16 50 overscroll-behavior-y 18 59 63 16 50 P padding 4 1 1 1 3.5 padding-block 87 66 87 14.1 73 padding-block-end 87 41 87 12.1 73 padding-block-start 87 41 87 12.1 73 padding-bottom 4 1 1 1 3.5 padding-inline 87 66 87 14.1 73 padding-inline-end 87 41 87 12.1 73 padding-inline-start 87 41 87 12.1 73 padding-left 4 1 1 1 3.5 padding-right 4 1 1 1 3.5 padding-top 4 1 1 1 3.5 @page 12 19 12 6 page-break-after 4 1 1 1.2 7 page-break-before 4 1 1 1.2 7 page-break-inside 8 19 1 1.3 7 paint-order 17 60 35 8 22 perspective 10 16 36 9 23 perspective-origin 10 16 36 9 23 place-content 79 53 59 11 46 place-items 79 45 59 11 46 place-self 79 45 59 11 46 pointer-events 11 3.6 2 4 9 position 7 1 1 1.2 4 @property 85 128 85 16.4 71 Q quotes 8 1.5 11 5.1 4 R resize 79 5 4 4 15 right 5.5 1 1 1 5 rotate 104 72 104 14.1 90 row-gap 84 63 84 14.1 70 S scale 104 72 104 14.1 90 @scope 118 118 17.4 104 scroll-behavior 79 36 61 14 48 scroll-margin 79 90 69 14.1 56 scroll-margin-block 79 68 69 14.1 56 scroll-margin-block-end 79 68 69 14.1 56 scroll-margin-block-start 79 68 69 14.1 56 scroll-margin-bottom 79 68 69 14.1 56 scroll-margin-inline 79 68 69 14.1 56 scroll-margin-inline-end 79 68 69 14.1 56 scroll-margin-inline-start 79 68 69 14.1 56 scroll-margin-left 79 68 69 14.1 56 scroll-margin-right 79 68 69 14.1 56 scroll-margin-top 79 68 69 14.1 56 scroll-padding 79 90 69 14.1 56 scroll-padding-block 79 68 69 14.1 56 scroll-padding-block-end 79 68 69 14.1 56 scroll-padding-block-start 79 68 69 14.1 56 scroll-padding-bottom 79 68 69 14.1 56 scroll-padding-inline 79 68 69 14.1 56 scroll-padding-inline-end 79 68 69 14.1 56 scroll-padding-inline-start 79 68 69 14.1 56 scroll-padding-left 79 68 69 14.1 56 scroll-padding-right 79 68 69 14.1 56 scroll-padding-top 79 68 69 14.1 56 scroll-snap-align 79 68 69 11 56 scroll-snap-stop 79 68 69 11 56 scroll-snap-type 79 68 69 11 56 scrollbar-color 121 64 121 107 scrollbar-gutter 94 97 94 80 scrollbar-width 121 64 121 107 shape-image-threshold 79 62 37 10.1 24 shape-margin 79 62 37 10.1 24 shape-outside 79 62 37 10.1 24 shape-rendering 80 72 80 13.1 67 @starting-style 117 129 117 17.5 103 @supports 12 22 28 9 12.1 T tab-size 79 91 21 7 15 table-layout 5 1 14 1 7 text-align 3 1 1 1 3.5 text-align-last 12 49 47 16 34 text-combine-upright 79 48 48 15.4 35 text-decoration 3 1 1 1 3.5 text-decoration-color 79 36 57 12.1 44 text-decoration-line 79 36 57 12.1 44 text-decoration-style 79 36 57 12.1 44 text-decoration-thickness 89 70 89 12.1 75 text-emphasis 99 46 99 7 85 text-emphasis-color 99 46 99 7 85 text-emphasis-position 99 46 99 7 85 text-emphasis-style 99 46 99 7 85 text-indent 3 1 1 1 3.5 text-justify 55 text-orientation 79 41 48 14 35 text-overflow 6 7 4 3.1 11 text-shadow 10 3.5 4 4 9.6 text-transform 4 1 1 1 7 text-underline-offset 87 70 87 12.1 73 text-underline-position 79 74 33 12.1 20 top 5 1 1 1 6 touch-action 12 52 36 13 23 transform 12 16 36 9 23 transform-origin 12 16 36 9 23 transform-style 12 16 36 9 23 transition 10 16 26 6.1 12.1 transition-delay 10 16 26 6.1 12.1 transition-duration 10 16 26 6.1 12.1 transition-property 10 16 26 6.1 12.1 transition-timing-function 10 16 26 6.1 12.1 translate 104 72 104 14.1 90 U unicode-bidi 5.5 1 2 1.3 9.2 user-select 79 69 54 3.1 41 V vertical-align 4 1 1 1 4 visibility 4 1 1 1 4 W white-space 8 3.5 1 3 9.5 widows 8 25 7 10 width 4 1 1 1 3.5 will-change 79 36 36 9.1 24 word-break 5.5 15 4 3.1 15 word-spacing 6 1 1 1 3.5 word-wrap 5.5 3.5 4 3.1 10.5 writing-mode 12 41 48 11 35 Z z-index 4 3 1 1 4 zoom 12 126 1 3.1 15 Icon Explanations Supported by Edge Supported by Firefox Supported by Chrome Supported by Safari Supported by Opera Supported by Edge with prefix -webkit- Supported by Firefox with prefix -moz- Supported by Chrome with prefix -webkit- Supported by Safari with prefix -webkit- Supported by Opera with prefix -webkit- ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复
CSS Default Values Reference
CSS Default Values Reference

Cavalry发布主题在教程

CSS Default Values Reference Default CSS Values for HTML Elements The table below shows the default CSS browser values for all HTML elements. Element Default CSS Value Try it a:link color: (internal value); text-decoration: underline; cursor: auto; Try it » a:visited color: (internal value); text-decoration: underline; cursor: auto; Try it » a:link:active color: (internal value); Try it » a:visited:active color: (internal value); Try it » abbr None. address display: block; font-style: italic; Try it » area display: none; article display: block; aside display: block; audio None. b font-weight: bold; Try it » base None. bdi None. bdo unicode-bidi: bidi-override; blockquote display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; Try it » body display: block; margin: 8px; Try it » body:focus outline: none; Try it » br None. button None canvas None. caption display: table-caption; text-align: center; Try it » cite font-style: italic; Try it » code font-family: monospace; Try it » col display: table-column; Try it » colgroup display: table-column-group Try it » datalist display: none; dd display: block; margin-left: 40px; Try it » del text-decoration: line-through; Try it » details display: block; dfn font-style: italic; Try it » dialog None. div display: block; Try it » dl display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; Try it » dt display: block; Try it » em font-style: italic; Try it » embed:focus outline: none; fieldset display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value); Try it » figcaption display: block; figure display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; Try it » footer display: block; form display: block; margin-top: 0em; Try it » h1 display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h2 display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h3 display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h4 display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h5 display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h6 display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » head display: none; header display: block; hr display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; Try it » html display: block; html:focus outline: none; i font-style: italic; Try it » iframe:focus outline: none; iframe[seamless] display: block; img display: inline-block; Try it » input None. ins text-decoration: underline; Try it » kbd font-family: monospace; Try it » label cursor: default; Try it » legend display: block; padding-left: 2px; padding-right: 2px; border: none; Try it » li display: list-item; link display: none; main None. map display: inline; mark background-color: yellow; color: black; Try it » menu display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; menuitem None. meta None. meter None. nav display: block; noscript None. object:focus outline: none; ol display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; Try it » optgroup None. option None. output display: inline; p display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; Try it » param display: none; picture None. pre display: block; font-family: monospace; white-space: pre; margin: 1em 0; Try it » progress None. q display: inline; Try it » q::before content: open-quote; Try it » q::after content: close-quote; Try it » rp None. rt line-height: normal; ruby None. s text-decoration: line-through; Try it » samp font-family: monospace; Try it » script display: none; section display: block; Try it » select None. small font-size: smaller; Try it » source None. span display: inline; strike text-decoration: line-through; Try it » strong font-weight: bold; Try it » style display: none; sub vertical-align: sub; font-size: smaller; Try it » summary display: block; sup vertical-align: super; font-size: smaller; Try it » table display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; Try it » tbody display: table-row-group; vertical-align: middle; border-color: inherit; td display: table-cell; vertical-align: inherit; template None. textarea None. tfoot display: table-footer-group; vertical-align: middle; border-color: inherit; th display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; thead display: table-header-group; vertical-align: middle; border-color: inherit; time None. title display: none; tr display: table-row; vertical-align: inherit; border-color: inherit; track None. u text-decoration: underline; Try it » ul display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; Try it » var font-style: italic; Try it » video None. wbr None. ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复
CSS Legal Color Values
CSS Legal Color Values

Cavalry发布主题在教程

CSS Legal Color Values CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names With the currentcolor keyword Hexadecimal Colors A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. Example Define different HEX colors: #p1 {background-color: #ff0000;} /* red */ #p2 {background-color: #00ff00;} /* green */ #p3 {background-color: #0000ff;} /* blue */ Try it Yourself » Hexadecimal Colors With Transparency A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF. Example Define different HEX colors with transparency: #p1a {background-color: #ff000080;} /* red transparency */ #p2a {background-color: #00ff0080;} /* green transparency */ #p3a {background-color: #0000ff80;} /* blue transparency */ Try it Yourself » RGB Colors An RGB color value is specified with the rgb() function, which has the following syntax: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%). For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%). Example Define different RGB colors: #p1 {background-color: rgb(255, 0, 0);} /* red */ #p2 {background-color: rgb(0, 255, 0);} /* green */ #p3 {background-color: rgb(0, 0, 255);} /* blue */ Try it Yourself » RGBA Colors RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color is specified with the rgba() function, which has the following syntax: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Example Define different RGB colors with opacity: #p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */ Try it Yourself » HSL Colors HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. An HSL color value is specified with the hsl() function, which has the following syntax: hsl(hue, saturation, lightness) Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white. Example Define different HSL colors: #p1 {background-color: hsl(120, 100%, 50%);} /* green */ #p2 {background-color: hsl(120, 100%, 75%);} /* light green */ #p3 {background-color: hsl(120, 100%, 25%);} /* dark green */ #p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */ Try it Yourself » HSLA Colors HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object. An HSLA color value is specified with the hsla() function, which has the following syntax: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Example Define different HSL colors with opacity: #p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */ Try it Yourself » Predefined/Cross-browser Color Names 140 color names are predefined in the HTML and CSS color specification. For example: blue, red, coral, brown, etc: Example Define different color names: #p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;} Try it Yourself » A list of all predefined names can be found in our Color Names Reference. The currentcolor Keyword The currentcolor keyword refers to the value of the color property of an element. Example The border color of the following <div> element will be blue, because the text color of the <div> element is blue: #myDIV { color: blue; /* Blue text color */ border: 10px solid currentcolor; /* Blue border color */ } Try it Yourself » ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复

CSS Image Filter Effects

CSS Filters

The CSS blur() Function

Example

The CSS brightness() Function

Example

The CSS contrast() Function

Example

The CSS drop-shadow() Function

Example

The CSS grayscale() Function

Example

The CSS hue-rotate() Function

Example

The CSS invert() Function

Example

The CSS opacity() Function

Example

The CSS saturate() Function

Example

The CSS sepia() Function

Example

CSS Filter Functions

参与讨论

CSS Browser Support Reference

CSS Default Values Reference

CSS Legal Color Values

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)