CSS属性学习:(六)边框-Border

borderborder-widthborder-styleborder-colorborder-topborder-top-widthborder-top-styleborder-top-colorborder-radiusbox-shadowborder-image

border


类型: Border

默认值: 看每个独立属性

取值: <line-width> || <line-style> || <color>

适用于: 所有元素

取值

  • <line-width>:设置或检索对象边框宽度。
  • <line-style>:设置或检索对象边框样式。
  • <color>:设置或检索对象边框颜色。

demo

See the Pen zKYWvN by yrq110 (@yrq110) on CodePen.


border-width


类型: Border

默认值: 看每个独立属性

取值: <line-width>{1,4} <line-width>:<length> | thin | medium | thick

适用于: 所有元素

取值

  • <length>:用长度值来定义边框的厚度。不允许负值
  • medium:定义默认厚度的边框。计算值为3px
  • thin:定义比默认厚度细的边框。计算值为1px
  • thick:定义比默认厚度粗的边框。计算值为5px

demo

See the Pen ORJvXq by yrq110 (@yrq110) on CodePen.


border-style


类型: Border

默认值: 看每个独立属性

取值: <line-style>{1,4} <line-style> : none | hidden | dotted| dashed | solid | double | groove | ridge | inset | outset

适用于: 所有元素

取值

  • none:无轮廓。border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。
  • hidden:隐藏边框。IE7及以下尚不支持
  • dotted:点状轮廓。IE6下显示为dashed效果
  • dashed:虚线轮廓。
  • solid:实线轮廓
  • double:双线轮廓。两条单线与其间隔的和等于指定的border-width值
  • groove:3D凹槽轮廓。
  • ridge:3D凸槽轮廓。
  • inset:3D凹边轮廓。
  • outset:3D凸边轮廓。

demo

See the Pen zKYZYQ by yrq110 (@yrq110) on CodePen.


border-color


类型: Border

默认值: 看每个独立属性

取值: <color>{1,4}

适用于: 所有元素

取值

  • <color>:指定颜色。

demo

See the Pen GjRzpm by yrq110 (@yrq110) on CodePen.


border-top


类型: Border

默认值: 看每个独立属性

取值: <line-width> || <line-style> || <color>

适用于: 所有元素

取值

  • <line-width>:设置或检索对象边框宽度。
  • <line-style>:设置或检索对象边框样式。
  • <color>:设置或检索对象边框颜色。

demo

See the Pen ozNmBL by yrq110 (@yrq110) on CodePen.


border-top-width


类型: Border

默认值: medium

取值: <length> | thin | medium | thick

适用于: 所有元素

取值

  • <length>:用长度值来定义边框的厚度。不允许负值
  • medium:定义默认厚度的边框。计算值为3px
  • thin:定义比默认厚度细的边框。计算值为1px
  • thick:定义比默认厚度粗的边框。计算值为5px

border-top-style


类型: Border

默认值: none

取值: none | hidden | dotted| dashed | solid | double | groove | ridge | inset | outset

适用于: 所有元素

取值

  • none:无轮廓。border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。
  • hidden:隐藏边框。IE7及以下尚不支持
  • dotted:点状轮廓。IE6下显示为dashed效果
  • dashed:虚线轮廓。
  • solid:实线轮廓
  • double:双线轮廓。两条单线与其间隔的和等于指定的border-width值
  • groove:3D凹槽轮廓。
  • ridge:3D凸槽轮廓。
  • inset:3D凹边轮廓。
  • outset:3D凸边轮廓。

border-top-color


类型: Border

默认值: currentColor

取值: <color>

适用于: 所有元素

取值

  • <color>:指定颜色。

demo

See the Pen QKwWVj by yrq110 (@yrq110) on CodePen.


border-radiusCSS3


类型: Border

默认值: 看每个独立属性

取值: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

适用于: 所有元素

取值

<length>:用长度值设置对象的圆角半径长度。不允许负值
<percentage>:用百分比设置对象的圆角半径长度。不允许负值

设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数

demo

See the Pen ozgZER by yrq110 (@yrq110) on CodePen.


box-shadowCSS3


类型: Border

默认值: none

取值: none| <shadow> [ , <shadow> ]* <shadow> = inset? && <length>{2,4} && <color>?

适用于: 所有元素

取值

none:无阴影
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④:如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>:设置对象的阴影的颜色。
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

demo

See the Pen qaEXov by yrq110 (@yrq110) on CodePen.


border-imageCSS3


类型: Border

默认值: 看每个独立属性

取值: <' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

适用于: 看每个独立属性

取值

  • <' border-image-source '>:设置或检索对象的边框是否用图像定义样式或图像来源路径。
  • <' border-image-slice '>:设置或检索对象的边框背景图的分割方式。
  • <' border-image-width '>:设置或检索对象的边框厚度。
  • <' border-image-outset '>:设置或检索对象的边框背景图的扩展。
  • <' border-image-repeat '>:设置或检索对象的边框图像的平铺方式。

使用图像替代 <’ border-style ‘> 去定义边框样式。当 <’ border-image ‘> 为none或图像不可见时,将会显示 <’ border-style ‘> 所定义的边框样式效果。

demo

See the Pen NRPvBj by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. border
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. border-width
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. border-style
    1. 3.1. 取值
    2. 3.2. demo
  4. 4. border-color
    1. 4.1. 取值
    2. 4.2. demo
  5. 5. border-top
    1. 5.1. 取值
    2. 5.2. demo
  6. 6. border-top-width
    1. 6.1. 取值
  7. 7. border-top-style
    1. 7.1. 取值
  8. 8. border-top-color
    1. 8.1. 取值
    2. 8.2. demo
  9. 9. border-radiusCSS3
    1. 9.1. 取值
    2. 9.2. demo
  10. 10. box-shadowCSS3
    1. 10.1. 取值
    2. 10.2. demo
  11. 11. border-imageCSS3
    1. 11.1. 取值
    2. 11.2. demo
|