相关文章推荐
有腹肌的火锅  ·  子组合器 - CSS：层叠样式表 | MDN·  1 周前    · 
爱健身的电脑桌  ·  接续兄弟组合器 - CSS：层叠样式表 | MDN·  1 周前    · 
霸气的小虾米  ·  :indeterminate - ...·  5 天前    · 
爱吹牛的小马驹  ·  border-style - CSS | MDN·  3 天前    · 
爱听歌的筷子  ·  C# GUI 程序显示控制台_c# ide ...·  1 年前    · 
低调的爆米花  ·  Windows窗口置顶神器-Deskpins ...·  2 年前    · 
深沉的金鱼  ·  使用curl命令的技巧 - 知乎·  2 年前    · 
礼貌的木瓜  ·  deepIn系统使用体验 - 知乎·  2 年前    · 
Code  ›  border-style - CSS | MDN
font position padding border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
爱吹牛的小马驹
3 天前 
<section id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
</section>

#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
body {
  background-color: white;
    
Constituent properties

    
This property is a shorthand for the following CSS properties:




    



  • border-bottom-style
    • 

  • border-left-style
    • 

  • border-right-style
    • 

  • border-top-style
    • 
    
    Syntax
    
    
    css
    /* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
/* top and bottom | left and right */
border-style: dotted solid;
/* top | left and right | bottom */
border-style: hidden double dashed;
/* top | right | bottom | left */
border-style: none solid dotted dashed;
/* Global values */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

    The border-style property may be specified using one, two, three, or four values.
    

  • When one value is specified, it applies the same style to all four sides.
    • 

  • When two values are specified, the first style applies to the top and bottom, the second to the left and right.
    • 

  • When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
    • 

  • When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
    • 

    Each value is a keyword chosen from the list below.
    
    
    Values
    

    <line-style>
    

    Describes the style of the border. It can have the following values:
    

    Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
    

    hidden
    

    Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
    

    dotted
    

    Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's border-width.
    

    dashed
    

    Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
    

    solid
    

    Displays a single, straight, solid line.
    

    double
    

    Displays two straight lines that add up to the pixel size defined by border-width.
    

    groove
    

    Displays a border with a carved appearance. It is the opposite of ridge.
    

    ridge
    

    Displays a border with an extruded appearance. It is the opposite of groove.
    

    inset
    

    Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
    

    outset
    

    Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
    
    
    Formal definition
    
    
    Initial valueas each of the properties of the shorthand:
    Applies toall elements. It also applies to ::first-letter.
    Inheritedno
    Computed valueas each of the properties of the shorthand:
    Animation typediscrete
    
    
    Formal syntax
    
    
    border-style = 
      <'border-top-style'>{1,4}  

    <border-top-style> = 
      <line-style>  

    <line-style> = 
      none    |
      hidden  |
      dotted  |
      dashed  |
      solid   |
      double  |
      groove  |
      ridge   |
      inset   |
      outset  
    

    
    Examples
    
    
    All property values
    
    
    Here is an example of all the property values.
    

    html
    <pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

    css
    pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
/* border-style example classes */
.b1 {
  border-style: none;
.b2 {
  border-style: hidden;
.b3 {
  border-style: dotted;
.b4 {
  border-style: dashed;
.b5 {
  border-style: solid;
.b6 {
  border-style: double;
.b7 {
  border-style: groove;
.b8 {
  border-style: ridge;
.b9 {
  border-style: inset;
.b10 {
  border-style: outset;

    Result
    
    
    Specifications
    
        Specification
          Learn how to contribute 
    
    This page was last modified on  by MDN contributors.
    View this page on GitHub • Report a problem with this content
      
    1. CSS
    2. CSS reference
    3. Modules
      1. CSS anchor positioning
      2. CSS animations
      3. CSS backgrounds and borders
      4. CSS basic user interface
      5. CSS borders and box decorations
      6. CSS box alignment
      7. CSS box model
      8. CSS box sizing
      9. CSS cascading and inheritance
      10. CSS color adjustment
      11. CSS colors
      12. CSS compositing and blending
      13. CSS conditional rules
      14. CSS containment
      15. CSS counter styles
      16. CSS custom functions and mixins
      17. CSS custom highlight API
      18. CSS custom properties for cascading variables
      19. CSS display
      20. CSS easing functions
      21. CSS environment variables
      22. CSS filter effects
      23. CSS flexible box layout
      24. CSS font loading
      25. CSS fonts
      26. CSS fragmentation
      27. CSS generated content
      28. CSS grid layout
      29. CSS images
      30. CSS inline layout
      31. CSS lists and counters
      32. CSS logical properties and values
      33. CSS masking
      34. CSS media queries
      35. CSS motion path
      36. CSS multi-column layout
      37. CSS namespaces
      38. CSS nesting
      39. CSS overflow
      40. CSS overscroll behavior
      41. CSS paged media
      42. CSS positioned layout
      43. CSS properties and values API
      44. CSS pseudo-elements
      45. CSS round display
      46. CSS ruby layout
      47. CSS scoping
      48. CSS scroll anchoring
      49. CSS scroll snap
      50. CSS scroll-driven animations
      51. CSS scrollbars styling
      52. CSS selectors
      53. CSS shadow parts
      54. CSS shapes
      55. CSS syntax
      56. CSS table
      57. CSS text
      58. CSS text decoration
      59. CSS transforms
      60. CSS transitions
      61. CSS values and units
      62. CSS view transitions
      63. CSS viewport
      64. CSS writing modes
      65. CSSOM view
    4. Properties
      1. -moz-*




    

        1. -moz-float-edge



        2. -moz-force-broken-image-icon



        3. -moz-orient


        4. -moz-user-focus



        5. -moz-user-input



      2. -webkit-*
        1. -webkit-border-before


        2. -webkit-box-reflect


        3. -webkit-mask-box-image


        4. -webkit-mask-composite


        5. -webkit-mask-position-x


        6. -webkit-mask-position-y


        7. -webkit-mask-repeat-x


        8. -webkit-mask-repeat-y


        9. -webkit-tap-highlight-color


        10. -webkit-text-fill-color
        11. -webkit-text-security


        12. -webkit-text-stroke
        13. -webkit-text-stroke-color
        14. -webkit-text-stroke-width
        15. -webkit-touch-callout


      3. Custom properties (--*): CSS variables
      4. accent-color
      5. align-*
        1. align-content
        2. align-items
        3. align-self
      6. alignment-baseline
      7. all
      8. anchor-name
      9. animation-*
        1. animation
        2. animation-composition
        3. animation-delay
        4. animation-direction
        5. animation-duration
        6. animation-fill-mode
        7. animation-iteration-count
        8. animation-name
        9. animation-play-state
        10. animation-range
        11. animation-range-end
        12. animation-range-start
        13. animation-timeline
        14. animation-timing-function
      10. appearance
      11. aspect-ratio
      12. backdrop-filter
      13. backface-visibility
      14. background-*
        1. background
        2. background-attachment
        3. background-blend-mode
        4. background-clip
        5. background-color
        6. background-image
        7. background-origin
        8. background-position
        9. background-position-x
        10. background-position-y
        11. background-repeat
        12. background-size
      15. block-size
      16. border-*
        1. border
        2. border-block
        3. border-block-color
        4. border-block-end
        5. border-block-end-color
        6. border-block-end-style
        7. border-block-end-width
        8. border-block-start
        9. border-block-start-color
        10. border-block-start-style
        11. border-block-start-width
        12. border-block-style
        13. border-block-width
        14. border-bottom
        15. border-bottom-color
        16. border-bottom-left-radius
        17. border-bottom-right-radius
        18. border-bottom-style
        19. border-bottom-width
        20. border-collapse
        21. border-color
        22. border-end-end-radius
        23. border-end-start-radius
        24. border-image
        25. border-image-outset
        26. border-image-repeat
        27. border-image-slice
        28. border-image-source
        29. border-image-width
        30. border-inline
        31. border-inline-color
        32. border-inline-end
        33. border-inline-end-color
        34. border-inline-end-style
        35. border-inline-end-width
        36. border-inline-start
        37. border-inline-start-color
        38. border-inline-start-style
        39. border-inline-start-width
        40. border-inline-style
        41. border-inline-width
        42. border-left
        43. border-left-color
        44. border-left-style
        45. border-left-width
        46. border-radius
        47. border-right
        48. border-right-color
        49. border-right-style
        50. border-right-width
        51. border-spacing
        52. border-start-end-radius
        53. border-start-start-radius
        54. border-style
        55. border-top
        56. border-top-color
        57. border-top-left-radius
        58. border-top-right-radius
        59. border-top-style
        60. border-top-width
        61. border-width
      17. bottom
      18. box-*
        1. box-align



        2. box-decoration-break
        3. box-direction



        4. box-flex



        5. box-flex-group



        6. box-lines



        7. box-ordinal-group



        8. box-orient



        9. box-pack



        10. box-shadow
        11. box-sizing
      19. break-*
        1. break-after
        2. break-before
        3. break-inside
      20. caption-side
      21. caret-*
        1. caret


        2. caret-animation


        3. caret-color
        4. caret-shape


      22. clear
      23. clip-*
        1. clip


        2. clip-path
        3. clip-rule
      24. color-*
        1. color
        2. color-interpolation
        3. color-interpolation-filters
        4. color-scheme
      25. column-*




    

        1. column-count
        2. column-fill
        3. column-gap
        4. column-rule
        5. column-rule-color
        6. column-rule-style
        7. column-rule-width
        8. column-span
        9. column-width
      26. columns
      27. contain-*
        1. contain
        2. contain-intrinsic-block-size
        3. contain-intrinsic-height
        4. contain-intrinsic-inline-size
        5. contain-intrinsic-size
        6. contain-intrinsic-width
      28. container-*
        1. container
        2. container-name
        3. container-type
      29. content
      30. content-visibility
      31. corner-*
        1. corner-block-end-shape


        2. corner-block-start-shape


        3. corner-bottom-left-shape


        4. corner-bottom-right-shape


        5. corner-bottom-shape


        6. corner-end-end-shape


        7. corner-end-start-shape


        8. corner-inline-end-shape


        9. corner-inline-start-shape


        10. corner-left-shape


        11. corner-right-shape


        12. corner-shape


        13. corner-start-end-shape


        14. corner-start-start-shape


        15. corner-top-left-shape


        16. corner-top-right-shape


        17. corner-top-shape


      32. counter-*
        1. counter-increment
        2. counter-reset
        3. counter-set
      33. cursor
      34. cx
      35. cy
      36. d
      37. direction
      38. display
      39. dominant-baseline
      40. dynamic-range-limit
      41. empty-cells
      42. field-sizing


      43. fill-*
        1. fill
        2. fill-opacity
        3. fill-rule
      44. filter
      45. flex-*
        1. flex
        2. flex-basis
        3. flex-direction
        4. flex-flow
        5. flex-grow
        6. flex-shrink
        7. flex-wrap
      46. float
      47. flood-color
      48. flood-opacity
      49. font-*
        1. font
        2. font-family
        3. font-feature-settings
        4. font-kerning
        5. font-language-override
        6. font-optical-sizing
        7. font-palette
        8. font-size
        9. font-size-adjust
        10. font-smooth


        11. font-stretch


        12. font-style
        13. font-synthesis
        14. font-synthesis-position


        15. font-synthesis-small-caps
        16. font-synthesis-style
        17. font-synthesis-weight
        18. font-variant
        19. font-variant-alternates
        20. font-variant-caps
        21. font-variant-east-asian
        22. font-variant-emoji
        23. font-variant-ligatures
        24. font-variant-numeric
        25. font-variant-position
        26. font-variation-settings
        27. font-weight
      50. forced-color-adjust
      51. gap
      52. grid-*
        1. grid
        2. grid-area
        3. grid-auto-columns
        4. grid-auto-flow
        5. grid-auto-rows
        6. grid-column
        7. grid-column-end
        8. grid-column-start
        9. grid-row
        10. grid-row-end
        11. grid-row-start
        12. grid-template
        13. grid-template-areas
        14. grid-template-columns
        15. grid-template-rows
      53. hanging-punctuation
      54. height
      55. hyphenate-character
      56. hyphenate-limit-chars
      57. hyphens
      58. image-*
        1. image-orientation
        2. image-rendering
        3. image-resolution


      59. initial-letter
      60. inline-size
      61. inset-*
        1. inset
        2. inset-block
        3. inset-block-end
        4. inset-block-start
        5. inset-inline
        6. inset-inline-end
        7. inset-inline-start
      62. interactivity


      63. interpolate-size


      64. isolation
      65. justify-*
        1. justify-content
        2. justify-items
        3. justify-self
      66. left
      67. letter-spacing
      68. lighting-color
      69. line-*
        1. line-break
        2. line-clamp
        3. line-height
        4. line-height-step


      70. list-*
        1. list-style
        2. list-style-image
        3. list-style-position
        4. list-style-type
      71. margin-*
        1. margin
        2. margin-block
        3. margin-block-end
        4. margin-block-start
        5. margin-bottom
        6. margin-inline
        7. margin-inline-end
        8. margin-inline-start
        9. margin-left
        10. margin-right
        11. margin-top
        12. margin-trim


      72. marker-*
        1. marker
        2. marker-end
        3. marker-mid
        4. marker-start
      73. mask-*
        1. mask
        2. mask-border
        3. mask-border-mode
        4. mask-border-outset
        5. mask-border-repeat
        6. mask-border-slice
        7. mask-border-source
        8. mask-border-width
        9. mask-clip
        10. mask-composite
        11. mask-image
        12. mask-mode
        13. mask-origin
        14. mask-position
        15. mask-repeat
        16. mask-size
        17. mask-type
      74. math-*
        1. math-depth
        2. math-shift


        3. math-style
      75. max-*
        1. max-block-size
        2. max-height
        3. max-inline-size
        4. max-width
      76. min-*




    

        1. min-block-size
        2. min-height
        3. min-inline-size
        4. min-width
      77. mix-blend-mode
      78. object-*
        1. object-fit
        2. object-position
        3. object-view-box


      79. offset-*
        1. offset
        2. offset-anchor
        3. offset-distance
        4. offset-path
        5. offset-position
        6. offset-rotate
      80. opacity
      81. order
      82. orphans
      83. outline-*
        1. outline
        2. outline-color
        3. outline-offset
        4. outline-style
        5. outline-width
      84. overflow-*
        1. overflow
        2. overflow-anchor
        3. overflow-block
        4. overflow-clip-margin
        5. overflow-inline
        6. overflow-wrap
        7. overflow-x
        8. overflow-y
      85. overlay


      86. overscroll-*
        1. overscroll-behavior
        2. overscroll-behavior-block
        3. overscroll-behavior-inline
        4. overscroll-behavior-x
        5. overscroll-behavior-y
      87. padding-*
        1. padding
        2. padding-block
        3. padding-block-end
        4. padding-block-start
        5. padding-bottom
        6. padding-inline
        7. padding-inline-end
        8. padding-inline-start
        9. padding-left
        10. padding-right
        11. padding-top
      88. page-*
        1. page
        2. page-break-after


        3. page-break-before


        4. page-break-inside


      89. paint-order
      90. perspective
      91. perspective-origin
      92. place-*
        1. place-content
        2. place-items
        3. place-self
      93. pointer-events
      94. position-*
        1. position
        2. position-anchor
        3. position-area
        4. position-try
        5. position-try-fallbacks
        6. position-try-order
        7. position-visibility


      95. print-color-adjust
      96. quotes
      97. r
      98. reading-flow


      99. reading-order


      100. resize
      101. right
      102. rotate
      103. row-gap
      104. ruby-*
        1. ruby-align
        2. ruby-overhang
        3. ruby-position
      105. rx
      106. ry
      107. scale
      108. scroll-*
        1. scroll-behavior
        2. scroll-margin
        3. scroll-margin-block
        4. scroll-margin-block-end
        5. scroll-margin-block-start
        6. scroll-margin-bottom
        7. scroll-margin-inline
        8. scroll-margin-inline-end
        9. scroll-margin-inline-start
        10. scroll-margin-left
        11. scroll-margin-right
        12. scroll-margin-top
        13. scroll-marker-group


        14. scroll-padding
        15. scroll-padding-block
        16. scroll-padding-block-end
        17. scroll-padding-block-start
        18. scroll-padding-bottom
        19. scroll-padding-inline
        20. scroll-padding-inline-end
        21. scroll-padding-inline-start
        22. scroll-padding-left
        23. scroll-padding-right
        24. scroll-padding-top
        25. scroll-snap-align
        26. scroll-snap-stop
        27. scroll-snap-type
        28. scroll-target-group


        29. scroll-timeline
        30. scroll-timeline-axis
        31. scroll-timeline-name
      109. scrollbar-*
        1. scrollbar-color
        2. scrollbar-gutter
        3. scrollbar-width
      110. shape-*
        1. shape-image-threshold
        2. shape-margin
        3. shape-outside
        4. shape-rendering
      111. speak-as


      112. stop-color
      113. stop-opacity
      114. stroke-*
        1. stroke
        2. stroke-dasharray
        3. stroke-dashoffset
        4. stroke-linecap
        5. stroke-linejoin
        6. stroke-miterlimit
        7. stroke-opacity
        8. stroke-width
      115. tab-size
      116. table-layout
      117. text-*
        1. text-align
        2. text-align-last
        3. text-anchor
        4. text-autospace
        5. text-box
        6. text-box-edge
        7. text-box-trim
        8. text-combine-upright
        9. text-decoration
        10. text-decoration-color
        11. text-decoration-line
        12. text-decoration-skip


        13. text-decoration-skip-ink
        14. text-decoration-style
        15. text-decoration-thickness
        16. text-emphasis
        17. text-emphasis-color
        18. text-emphasis-position
        19. text-emphasis-style
        20. text-indent
        21. text-justify
        22. text-orientation
        23. text-overflow
        24. text-rendering
        25. text-shadow
        26. text-size-adjust


        27. text-spacing-trim


        28. text-transform
        29. text-underline-offset
        30. text-underline-position
        31. text-wrap
        32. text-wrap-mode
        33. text-wrap-style
      118. timeline-scope
      119. top
      120. touch-action
      121. transform-*
        1. transform
        2. transform-box
        3. transform-origin
        4. transform-style
      122. transition-*
        1. transition
        2. transition-behavior
        3. transition-delay
        4. transition-duration
        5. transition-property
        6. transition-timing-function
      123. translate
      124. unicode-bidi
      125. user-modify



      126. user-select
      127. vector-effect
      128. vertical-align
      129. view-*
        1. view-timeline
        2. view-timeline-axis
        3. view-timeline-inset
        4. view-timeline-name
        5. view-transition-class
        6. view-transition-name
      130. visibility
      131. white-space
      132. white-space-collapse
      133. widows
      134. width
      135. will-change
      136. word-break
      137. word-spacing
      138. writing-mode
      139. x
      140. y
      141. z-index
      142. zoom
    5. Selectors
      1. & nesting selector
      2. Attribute selectors
      3. Class selectors
      4. ID selectors
      5. Type selectors
      6. Universal selectors
    6. Combinators




    

      1. Child combinator
      2. Column combinator


      3. Descendant combinator
      4. Namespace separator
      5. Next-sibling combinator
      6. Selector list
      7. Subsequent-sibling combinator
    7. Pseudo-classes
      1. :-moz-*
        1. :-moz-broken



        2. :-moz-drag-over


        3. :-moz-first-node



        4. :-moz-handler-blocked


        5. :-moz-handler-crashed


        6. :-moz-handler-disabled


        7. :-moz-last-node



        8. :-moz-loading


        9. :-moz-locale-dir(ltr)


        10. :-moz-locale-dir(rtl)


        11. :-moz-only-whitespace


        12. :-moz-submit-invalid


        13. :-moz-suppressed


        14. :-moz-user-disabled


        15. :-moz-window-inactive


      2. :active
      3. :active-view-transition
      4. :any-link
      5. :autofill
      6. :blank


      7. :buffering
      8. :checked
      9. :current


      10. :default
      11. :defined
      12. :dir()
      13. :disabled
      14. :empty
      15. :enabled
      16. :first-*
        1. :first
        2. :first-child
        3. :first-of-type
      17. :focus-*
        1. :focus
        2. :focus-visible
        3. :focus-within
      18. :fullscreen
      19. :future
      20. :has-slotted
      21. :has()
      22. :heading


      23. :heading()


      24. :host
      25. :host-context()


      26. :host()
      27. :hover
      28. :in-range
      29. :indeterminate
      30. :invalid
      31. :is()
      32. :lang()
      33. :last-child
      34. :last-of-type
      35. :left
      36. :link
      37. :local-link


      38. :modal
      39. :muted
      40. :not()
      41. :nth-*
        1. :nth-child()
        2. :nth-last-child()
        3. :nth-last-of-type()
        4. :nth-of-type()
      42. :only-child
      43. :only-of-type
      44. :open
      45. :optional
      46. :out-of-range
      47. :past
      48. :paused
      49. :picture-in-picture
      50. :placeholder-shown
      51. :playing
      52. :popover-open
      53. :read-only
      54. :read-write
      55. :required
      56. :right
      57. :root
      58. :scope
      59. :seeking
      60. :stalled
      61. :state()
      62. :target
      63. :target-current


      64. :user-invalid
      65. :user-valid
      66. :valid
      67. :visited
      68. :volume-locked
      69. :where()
    8. Pseudo-elements
      1. ::-moz-*
        1. ::-moz-color-swatch


        2. ::-moz-focus-inner



        3. ::-moz-list-bullet



        4. ::-moz-list-number



        5. ::-moz-meter-bar


        6. ::-moz-progress-bar



        7. ::-moz-range-progress


        8. ::-moz-range-thumb


        9. ::-moz-range-track


      2. ::-webkit-*
        1. ::-webkit-inner-spin-button


        2. ::-webkit-meter-bar



        3. ::-webkit-meter-even-less-good-value


        4. ::-webkit-meter-inner-element


        5. ::-webkit-meter-optimum-value


        6. ::-webkit-meter-suboptimum-value


        7. ::-webkit-progress-bar


        8. ::-webkit-progress-inner-element


        9. ::-webkit-progress-value


        10. ::-webkit-scrollbar


        11. ::-webkit-search-cancel-button


        12. ::-webkit-search-results-button


        13. ::-webkit-slider-runnable-track


        14. ::-webkit-slider-thumb


      3. ::after
      4. ::backdrop
      5. ::before
      6. ::checkmark


      7. ::column


      8. ::cue
      9. ::details-content
      10. ::file-selector-button
      11. ::first-letter
      12. ::first-line
      13. ::grammar-error
      14. ::highlight()
      15. ::marker
      16. ::part()
      17. ::picker-icon


      18. ::picker()


      19. ::placeholder
      20. ::scroll-*
        1. ::scroll-button()


        2. ::scroll-marker


        3. ::scroll-marker-group


      21. ::selection
      22. ::slotted()
      23. ::spelling-error
      24. ::target-text
      25. ::view-*
        1. ::view-transition
        2. ::view-transition-group()
        3. ::view-transition-image-pair()
        4. ::view-transition-new()
        5. ::view-transition-old()
    9. At-rules
      1. @charset
      2. @color-profile
      3. @container
      4. @counter-style
      5. @document



      6. @font-face
      7. @font-feature-values
      8. @font-palette-values
      9. @function


      10. @import
      11. @keyframes
      12. @layer
      13. @media
      14. @namespace
      15. @page
      16. @position-try
      17. @property
      18. @scope
      19. @starting-style
      20. @supports
      21. @view-transition
    10. Functions
      1. -moz-image-rect



      2. abs()
      3. acos()
      4. anchor-size()
      5. anchor()
      6. asin()
      7. atan()
      8. atan2()
      9. attr()
      10. blur()
      11. brightness()
      12. calc-size()


      13. calc()
      14. circle()
      15. clamp()
      16. color-mix()
      17. color()
      18. conic-gradient()
      19. contrast-color()


      20. contrast()
      21. cos()
      22. counter()
      23. counters()
      24. cross-fade()
      25. cubic-bezier()
      26. device-cmyk()
      27. drop-shadow()
      28. dynamic-range-limit-mix()


      29. element()


      30. ellipse()
      31. env()
      32. exp()
      33. fit-content()
      34. grayscale()
      35. hsl()
      36. hue-rotate()
      37. hwb()
      38. hypot()
      39. if()


      40. image-set()
      41. image()
      42. inset()
      43. invert()
      44. lab()
      45. layer()
      46. lch()
      47. light-dark()
      48. linear-gradient()
      49. linear()
      50. log()
      51. matrix()
      52. matrix3d()
      53. max()
      54. min()
      55. minmax()
      56. mod()
      57. oklab()
      58. oklch()
      59. opacity()
      60. paint()
      61. palette-mix()


      62. path()
      63. perspective()
      64. polygon()
      65. pow()
      66. progress()


      67. radial-gradient()
      68. ray()
      69. rect()
      70. rem()
      71. repeat()
      72. repeating-conic-gradient()
      73. repeating-linear-gradient()
      74. repeating-radial-gradient()
      75. rgb()
      76. rotate()
      77. rotate3d()
      78. rotateX()
      79. rotateY()
      80. rotateZ()
      81. round()
      82. saturate()
      83. scale()
      84. scale3d()
      85. scaleX()
      86. scaleY()
      87. scaleZ()
      88. scroll()
      89. sepia()
      90. shape()
      91. sibling-count()


      92. sibling-index()


      93. sign()
      94. sin()
      95. skew()
      96. skewX()
      97. skewY()
      98. sqrt()
      99. steps()
      100. superellipse()


      101. symbols()
      102. tan()
      103. translate()
      104. translate3d()
      105. translateX()
      106. translateY()
      107. translateZ()
      108. type()


      109. url()
      110. var()
      111. view()
      112. xywh()
    11. Types
      1. <absolute-size>
      2. <alpha-value>
      3. <angle-percentage>
      4. <angle>
      5. <baseline-position>
      6. <basic-shape>
      7. <blend-mode>
      8. <box-edge>
      9. <calc-keyword>
      10. <calc-sum>
      11. <color-interpolation-method>
      12. <color>
      13. <content-distribution>
      14. <content-position>
      15. <corner-shape-value>


      16. <custom-ident>
      17. <dashed-function>


      18. <dashed-ident>
      19. <dimension>
      20. <display-box>
      21. <display-inside>
      22. <display-internal>
      23. <display-legacy>
      24. <display-listitem>
      25. <display-outside>
      26. <easing-function>
      27. <filter-function>
      28. <flex>
      29. <frequency-percentage>
      30. <frequency>
      31. <generic-family>
      32. <gradient>
      33. <hex-color>
      34. <hue-interpolation-method>
      35. <hue>
      36. <ident>
      37. <image>
      38. <integer>
      39. <length-percentage>
      40. <length>
      41. <line-style>
      42. <named-color>
      43. <number>
      44. <overflow-position>
      45. <overflow>
      46. <percentage>
      47. <position-area>
      48. <position>
      49. <ratio>
      50. <relative-size>
      51. <resolution>
      52. <self-position>
      53. <shape>


      54. <string>
      55. <system-color>
      56. <text-edge>
      57. <time-percentage>
      58. <time>
      59. <transform-function>
      60. <url>
    12. Guides
    13. Anchor positioning
      1. Using anchor positioning
      2. Handling overflow
    14. Animations
      1. Animatable properties
      2. Using animations
    15. Backgrounds and borders
      1. Using multiple backgrounds
      2. Resizing background images
      3. Scaling SVG backgrounds
    16. Box alignment
      1. Overview
      2. Box alignment in block layout
      3. Box alignment in flexbox
      4. Box alignment in grid layout
      5. Box alignment in multi-column layout
    17. Box model
      1. Introduction
      2. Mastering margin collapsing
    18. Cascade
      1. Introduction
      2. Inheritance
      3. Specificity
      4. Property value processing
      5. Shorthand properties
    19. Custom properties
      1. Using custom properties
    20. Colors
      1. Applying color to HTML
      2. Color values
      3. Using relative colors
      4. Using color wisely
      5. Accessibility: Colors and luminance
      6. Accessibility: Color contrast
    21. Columns
      1. Basic concepts
      2. Styling columns
      3. Using multi-column layouts
      4. Spanning and balancing columns
      5. Handling overflow
      6. Handling content breaks
    22. Conditional rules
      1. Using feature queries
      2. Using container scroll-state queries
    23. Containment
      1. Container queries
      2. Using containment
      3. Using container size and style queries
    24. CSSOM view
      1. Coordinate systems
      2. Viewport concepts
    25. Display
      1. Block and inline layout
      2. Flow layout
      3. Flow layout and overflow
      4. Flow layout and writing modes
      5. In flow and out of flow
      6. Layout and the containing block
      7. Formatting contexts
      8. Block formatting context
      9. Inline formatting context
      10. Using multi-keyword syntax
      11. Visual formatting model
    26. Filter effects
      1. Using filter effects
    27. Flexbox
      1. Basic concepts
      2. Flexbox and other layouts
      3. Aligning flex items
      4. Ordering flex items
      5. Controlling flex item ratios
      6. Wrapping flex items
      7. Typical use cases
    28. Fonts
      1. OpenType features
      2. Variable fonts
      3. WOFF
    29. Grid
      1. Basic concepts
      2. Grid and other layouts
      3. Grid template areas
      4. Using line-based placement
      5. Using named grid lines
      6. Auto-placement
      7. Aligning items
      8. Logical values and writing modes
      9. Common grid layouts
      10. Subgrid
      11. Grid layout and accessibility
      12. Masonry layout


    30. Images
      1. Using gradients
      2. Styling replaced elements
      3. Implementing image sprites
    31. Lists and counters
      1. Using counters
      2. Indenting lists
    32. Logical properties
      1. Basic concepts
      2. Logical properties for floating and positioning
      3. Logical properties for margins, borders, and padding
      4. Logical properties for sizing
    33. Media queries
      1. Using media queries
      2. Using media queries for accessibility
      3. Testing media queries programmatically
      4. Printing
    34. Nesting style rules
      1. Nesting at-rules
      2. Nesting and specificity
      3. Using nesting
    35. Overflow
      1. Creating carousels
    36. Positioning
      1. Stacking context
      2. Stacking floating elements
      3. Understanding z-index
      4. Using z-index
      5. Stacking without z-index
    37. Scroll anchoring
      1. Overview
    38. Scroll snap
      1. Basic concepts
      2. Using scroll snap events
    39. Selectors
      1. Privacy and :visited
      2. Selector structure
      3. Selectors and combinators
      4. Using :target
    40. Shapes
      1. Overview
      2. Box-value shapes
      3. Image-based shapes
      4. Using shape-outside
    41. Syntax
      1. Introduction
      2. Comments
      3. At-rule functions
      4. Error handling
    42. Text
      1. Wrapping and breaking text
      2. Handling whitespace
    43. Text decoration
      1. Text shadows
    44. Transforms
      1. Using transforms
    45. Transitions
      1. Using transitions
    46. Values and units
      1. Value definition syntax
      2. Numeric data types
      3. Textual data types
      4. Using math functions
    47. Layout cookbook
      1. Recipe: Media objects
      2. Column layouts
      3. Center an element
      4. Sticky footers
      5. Split navigation
      6. Breadcrumb navigation
      7. List group with badges
      8. Pagination
      9. Card
      10. Grid wrapper
    49. Tools
      1. Border-image generator
      2. Border-radius generator
      3. Box-shadow generator
      4. Color format converter
      5. Color mixer
      6. Shape generator
     
    推荐文章
    有腹肌的火锅  ·  子组合器 - CSS：层叠样式表 | MDN
    1 周前
    爱健身的电脑桌  ·  接续兄弟组合器 - CSS：层叠样式表 | MDN
    1 周前
    霸气的小虾米  ·  :indeterminate - CSS：层叠样式表 | MDN
    5 天前
    爱吹牛的小马驹  ·  border-style - CSS | MDN
    3 天前
    爱听歌的筷子  ·  C# GUI 程序显示控制台_c# ide gui-CSDN博客
    1 年前
    低调的爆米花  ·  Windows窗口置顶神器-Deskpins-腾讯云开发者社区-腾讯云
    2 年前
    深沉的金鱼  ·  使用curl命令的技巧 - 知乎
    2 年前
    礼貌的木瓜  ·  deepIn系统使用体验 - 知乎
    2 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号