CSS Borders

初发布于 03 Apr 2014 | in CSS

CSS Borders

  • border-style 指定要显示什么类型的边框。可能的取值:

    • none: 没有边框
    • dotted: 小方块（像素点）连成的
    • dashed: 虚线的（比 dotted 长）
    • solid: 实线边框
    • double: 双实线边框，边框之间的距离等于 border-width 边框宽度的值
    • groove: 3D纹理（槽）边框
    • ridge: 3D隆起的
    • inset: 3D嵌入的
    • outset: 3D突出的
    • hidden: 效果同 “none”
  • border-width 设定四条边的边框宽度。宽度可以用指定的尺寸（以 px，pt，cm，em 等为单位），或者使用三个预定义的值（thin, medium, 或 thick）
  • border-color 设定四条边的边框颜色。颜色可以按照 CSS color 的 name, RGB, HEX 设定，也可以设为 transparent 透明的。

赋值的形式

border-style 可以同时拥有1到4个值，按照 上 右 下 左 顺时针赋值。border-width 和 border-color 的赋值同理。

  1. border-style: dotted solid double dashed;。效果如下：

  2. border-style: dotted solid double;。效果如下：

  3. border-style: dotted solid;。效果如下：

  4. border-style: dotted;。效果如下：

注意: 除非先设定 border-style，否则任何 border 性质（如：width、color…）都不会产生效果。

Individual Sides 单个边框

我们可以单独对一条边（top，right，bottom，left）的边框进行设定。

比如: border-top-style, border-right-style, border-bottom-style, border-left-style

All in one 简写形式

可使用 border 属性一次性设定四条边的边框样式，如果有一个值没有设定，也是允许的。但应遵循的顺序如下：

  • border-width: medium（默认值）
  • border-style (required): none（默认值）
  • border-color: 元素的 color 即字体颜色（默认值）

Tip: 同样的，可以只针对一条边来一次性设定边框样式，规则同上。

border-top, border-right, border-bottom, border-left

示例

  1. 画等腰直角三角形

    当边框调到很粗的时候，每条边的边框会出现三角形的基本轮廓。因此我们可以借助 CSS border 绘制三角形。

    上：
    右：
    下：
    左：
     div { /* 向上的三角形 */
     width: 0;
     height: 0;
     border-width: 20px;
     border-style: solid;
     border-color: transparent transparent #363532 transparent;
 }

  2. 画非等腰三角形

    通过设置元素宽、高为 0，边框样式为 solid，上边框设置一定的宽度和颜色，左右两边设为同尺寸透明边框，可绘制出非直角三角形。

    下面用 CSS 实现一个简单的三步操作进度条：

    See the Pen CSS progress bar by Vivienne (@VivienneWU) on CodePen.

CSS3 Borders 新属性

  1. border-radius 该属性实际上是 border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 这四个属性的 all in one 缩写形式。

    通过给 border-radius 属性赋予不同个数的值，来指定盒模型每一个顶点的圆角。当取值为：

    • 四个值：左上角、右上角、右下角、左下角

      border-radius: 5px 10px 30px 40px;

    • 三个值：左上角、右上角和左下角（两个斜对角）、右下角

      border-radius: 5px 10px 30px;

    • 两个值：左上角和右下角、右上角和左下角

      border-radius: 5px 20px;

    • 一个值：四个角

      border-radius: 5px;

    该属性还有可选的第二个值，如：border-radius: 100px/40px，可得到椭圆角。

  2. box-shadow 可以给一个元素添加一个或多个水平和（或）竖直方向上的阴影，使用逗号来分隔开每一种阴影效果。Tip: 通过给 ::before and ::after 伪类添加 shadow，可以实现有趣的效果。

    box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

    • none: 默认不显示阴影
    • h-shadow: required, 水平阴影的位置，允许负值
    • v-shadow: required, 竖直阴影的位置，允许负值
    • blur: 可选的, 模糊的距离
    • spread: 可选的, 阴影的尺寸大小，允许负值
    • color: 可选的, 默认是黑色，PC 端 Safari 中，颜色值是 required。如果不指定颜色，将不显示阴影
    • inset: 可选的, 把默认的 outset 外部阴影显示为 inner shadow 向内的阴影。

  3. border-image 该属性包含三部分：所需的图片，裁剪图片的位置（将图片分为9部分，像一个井字棋盘，It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.），定义中间部分是否需要重复或拉伸。是以下属性的 all in one 简写形式。

    • border-image-source
    • border-image-slice
    • border-image-width 默认值是 1
    • border-image-outset 默认值是 0
    • border-image-repeat（可取值 stretch 默认值，repeat，round，space）

    其中，border-image-repeat 取值为 round 时，图片按照整数的 tiles 重复排列以填充边框区域，如果不满足整数，图片会 rescaled 重新缩放来填充。

    当取值为 space 时，也是要求按整数个 tiles 重复排列来填充，如果不满足，剩余的空间将平均分配到 tiles 的周围。

注意：要使用图片边框，需设置 border 性质。