导航|地址|刷新
CSS properties - CSS | MDN


Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Web

CSS

Reference

Properties

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

中文 (简体)







CSS properties


A CSSproperty is a parameter used in a CSS declaration that lets you style certain aspects of selected elements. For example, the opacity property is used to set the opacity of a selected element, allowing you to control if content behind that element is visible:


css
/* Set 0.8 opacity on <img> elements */ img { opacity: 0.8; }

Each property has a name (e.g., opacity), a value (e.g., 0.8), and a defined behavior on the rendering of the document. CSS also defines shorthand properties, so you can specify multiple related properties in a single declaration. For example, the margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left, setting the margin of all four sides of an element:


css
/* Give <img> elements 1rem of margin */ img { margin: 1rem; }



In this article

Syntax

Alphabetical index of properties

Specifications

See also



Syntax


css
selector { property: value; }



Alphabetical index of properties

Standard properties defined by CSS specifications include the following:



Misc

Custom properties (--*): CSS variables



A

accent-color

align-content

align-items

align-self

alignment-baseline

all (shorthand)

anchor-name

anchor-scope

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-range-end

animation-range-start

animation-range (shorthand)

animation-timeline

animation-timing-function

animation (shorthand)

appearance

aspect-ratio



B

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position-x

background-position-y

background-position

background-repeat (shorthand)

background-repeat-x

background-repeat-y

background-size

background (shorthand)

baseline-shift

baseline-source

block-size



Border-*

border-block-color

border-block-end-color

border-block-end-style

border-block-end-width

border-block-end (shorthand)

border-block-start-color

border-block-start-style

border-block-start-width

border-block-start (shorthand)

border-block-style

border-block-width

border-block (shorthand)

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-bottom (shorthand)

border-collapse

border-color (shorthand)

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-image (shorthand)

border-inline-color

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-end (shorthand)

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-start (shorthand)

border-inline-style

border-inline-width

border-inline (shorthand)

border-left-color

border-left-style

border-left-width

border-left (shorthand)

border-radius (shorthand)

border-right-color

border-right-style

border-right-width

border-right (shorthand)

border-spacing

border-start-end-radius

border-start-start-radius

border-style (shorthand)

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-top (shorthand)

border-width (shorthand)

border (shorthand)



B - C

bottom

box-align

box-decoration-break

box-direction

box-flex-group

box-flex

box-lines

box-ordinal-group

box-orient

box-pack

box-shadow

box-sizing

break-after

break-before

break-inside

caption-side

caret-animation

caret-color

caret-shape

caret (shorthand)

clear

clip-path

clip-rule

clip

color-interpolation-filters

color-interpolation

color-scheme

color

column-count

column-fill

column-gap

column-height

column-rule-color

column-rule-style

column-rule-width

column-rule (shorthand)

column-span

column-width

column-wrap

columns (shorthand)

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size (shorthand)

contain-intrinsic-width

contain

container-name

container-type

container (shorthand)

content-visibility

content

corner-block-end-shape

corner-block-start-shape

corner-bottom-left-shape

corner-bottom-right-shape

corner-bottom-shape (shorthand)

corner-end-end-shape

corner-end-start-shape

corner-inline-end-shape

corner-inline-start-shape

corner-left-shape (shorthand)

corner-right-shape (shorthand)

corner-shape (shorthand)

corner-start-end-shape

corner-start-start-shape

corner-top-left-shape

corner-top-right-shape

corner-top-shape (shorthand)

counter-increment

counter-reset

counter-set

cursor

cx

cy



D - F

d

direction

display

dominant-baseline

dynamic-range-limit

empty-cells

field-sizing

fill-opacity

fill-rule

fill

filter

flex-basis

flex-direction

flex-flow (shorthand)

flex-grow

flex-shrink

flex-wrap

flex (shorthand)

float

flood-color

flood-opacity

font-family

font-feature-settings

font-kerning

font-language-override

font-optical-sizing

font-palette

font-size-adjust

font-size

font-smooth

font-stretch

font-style

font-synthesis-position

font-synthesis-small-caps

font-synthesis-style

font-synthesis-weight

font-synthesis (shorthand)

font-variant-alternates

font-variant-caps

font-variant-east-asian

font-variant-emoji

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variant (shorthand)

font-variation-settings

font-weight

font-width

font (shorthand)

forced-color-adjust



G - I

gap (shorthand)

grid-area (shorthand)

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column-end

grid-column-start

grid-column (shorthand)

grid-row-end

grid-row-start

grid-row (shorthand)

grid-template-areas

grid-template-columns

grid-template-rows

grid-template (shorthand)

grid (shorthand)

hanging-punctuation

height

hyphenate-character

hyphenate-limit-chars

hyphens

image-orientation

image-rendering

image-resolution

initial-letter

inline-size

inset-block-end

inset-block-start

inset-block (shorthand)

inset-block (shorthand)

inset-inline-end

inset-inline-start

inset-inline (shorthand)

inset-inline (shorthand)

inset (shorthand)

inset (shorthand)

interactivity

interest-delay

interest-delay-end

interest-delay-start

interpolate-size

isolation



J - M

justify-content

justify-items

justify-self

left

letter-spacing

lighting-color

line-break

line-clamp

line-height-step

line-height

list-style-image

list-style-position

list-style-type

list-style (shorthand)

list-style (shorthand)

margin-block-end

margin-block-start

margin-block (shorthand)

margin-bottom

margin-inline-end

margin-inline-start

margin-inline (shorthand)

margin-left

margin-right

margin-top

margin-trim

margin (shorthand)

marker-end

marker-mid

marker-start

marker

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-border (shorthand)

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

mask (shorthand)

math-depth

math-shift

math-style

max-block-size

max-height

max-inline-size

max-width

min-block-size

min-height

min-inline-size

min-width

mix-blend-mode



O - P

object-fit

object-position

object-view-box

offset-anchor

offset-distance

offset-path

offset-position

offset-rotate

offset (shorthand)

opacity

order

orphans

outline-color

outline-offset

outline-style

outline-width

outline (shorthand)

overflow-anchor

overflow-block

overflow-clip-margin

overflow-inline

overflow-wrap

overflow-x

overflow-y

overflow (shorthand)

overlay

overscroll-behavior-block

overscroll-behavior-inline

overscroll-behavior-x

overscroll-behavior-y

overscroll-behavior (shorthand)

padding-block-end

padding-block-start

padding-block (shorthand)

padding-bottom

padding-inline-end

padding-inline-start

padding-inline (shorthand)

padding-left

padding-right

padding-top

padding (shorthand)

page-break-after

page-break-before

page-break-inside

page

paint-order

path-length

perspective-origin

perspective

place-content (shorthand)

place-items (shorthand)

place-self (shorthand)

pointer-events

position-anchor

position-area

position-try-fallbacks

position-try-order

position-try (shorthand)

position-visibility

position

print-color-adjust



Q - S

quotes

r

reading-flow

reading-order

resize

right

rotate

row-gap

ruby-align

ruby-overhang

ruby-position

rx

ry

scale

scroll-behavior

scroll-initial-target

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-block (shorthand)

scroll-margin-bottom

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-inline (shorthand)

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-margin (shorthand)

scroll-marker-group

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-block (shorthand)

scroll-padding-bottom

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-inline (shorthand)

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-padding (shorthand)

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-target-group

scroll-timeline-axis

scroll-timeline-name

scroll-timeline (shorthand)

scrollbar-color
…(内容过长已截断)

------
导航页 打开网址