Border
Border style
The border-style property specifies what kind of border to display.
該性質指定了要顯示哪一種邊框。
Note: None of the border properties will have ANY effect unless the border-style property is set!
注意,除非先設定 border-style 性質,否則任何 border 性質(如:border width、border color...)都不會產生效果。
border-style 可能的取值:
- none: no border
- dotted: 小圓點(小方塊)的
- dashed: 虛線的
- solid: 實線邊框
- double: 雙線邊框,邊框之間的距離等於 border-width value 邊框寬度值
- groove: 3D紋理(槽)邊框
- ridge: 3D隆起的
- inset: 3D嵌入的
- outset: 3D突出的
- hidden: The same as "none", except in border conflict resolution for table elements
border-style 可以同時擁有1到4個值,對 border-width、border-color同樣適用。
上 右 下 左 -->順時針!
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
- border-style: dotted solid double;
- top border is dotted
- right and leftborders are solid
- bottom border is double
- border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
- border-style: dotted;
- all four borders are dotted
Tip: 還可單獨對一條邊的邊框進行設定,對 border-width、border-color 同樣適用。
- border-top-style, border-right-style, border-bottom-style, border-left-style
Border width
The border-width property is used to set the width of the border.
該性質用於設定邊框寬度。
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick
可用px設定確定的值表示,也可以用這三個預定義的值之一。
Border color
The border-color property is used to set the color of the borders
該性質用於設定邊框的顏色。
The color can be set by: name, RGB, HEX, you can also set the border color to transparent
If the border color is not set it is inherited from the color property of the element.
如果沒有明確設定邊框顏色,則它的值將繼承該元素的color性質的值。
用border實現縮寫
可使用 border來一次性設定邊框四個邊的樣式,如果有一個值沒有設定,也是允許的。但應遵循的順序如下:
- border-width 默認值: medium
- border-style (required)默認值: none
- border-color 默認值: the color of the element
border:5px solid red;
Tip: 同樣的,可以只針對一條邊來一次性設定邊框樣式。規則同上。
- border-top, border-right, border-bottom, border-left
Padding
The CSS padding properties define the space between the element border and the element content.
該性質定義了元素的邊框和內容區域之間的空隙。
可能的取值:
- length (in px, pt, cm, etc.) 默認值爲 0
- % 以包含元素的百分比來表示
同 border 一樣,可以針對每一條邊單獨設定內邊距,也可以使用 padding 性質,一次全部設定。
單邊設定: padding-top, padding-right, padding-bottom, padding-left
四條邊一起設定,使用 padding 屬性名,規則同 border-style:- padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
- padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
- padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
- padding: 25px;
- all four paddings are 25px
Margin
The CSS margin properties define the space around elements (outside the border).
該性質定義了元素外環繞元素的空間,外邊距。
注意:
The margin does not have a background color, and is completely transparent.
外邊距沒有背景色,是完全透明的。
The padding is affected by the background color of the element.
而內邊距要受到元素背景色的影響。
可能的取值:
- auto: The browser calculates a margin 瀏覽器計算外邊距
- length: in px, pt, cm, etc.) 默認值爲 0
- %: in percent % of the width of the containing element
- inherit: 繼承父元素
It is also possible to use negative values, to overlap content.
外邊距可以取負值,因爲兩個元素可以互相重疊
單邊設定和縮寫方法同padding.