边框样式

圆角

• 规则

  border-radius: 取值;
  

• 参数

  • 定义 四个角的 圆角半径
  • 从左上角，顺时针方向，到左下角
    • 一般写 1 个: 4 个角一样值
    • 可写 2 个: 后 2 个角 复刻 前 2 个角

• 作用

  • 画半圆
    • 定义 矩形框(长宽比 2：1)
    • 圆角半径设为宽度即可
  • 画圆
    • 定义 正方形框
    • 圆角半径设为边长一半即可

椭圆角

• 规则

  border-radius: x/y;
  

• 参数

  • x 定义圆角水平半径
  • y 定义圆角垂直半径

• 作用

  • 画椭圆
    • 定义 矩形框
    • x 设为宽的一半
    • y 设为长的一半

多色边框

兼容性很差，只有 Firefox 支持

• 规则

  border-方向-colors: 颜色值;
  

• 注意

  • 方向可取 top/right/bottom/left
  • 要 4 个方向写 4 句才行，不能一句搞定
  • 颜色值可以取 n 个，实现渐变，n 为边框的像素值

给边框加背景图片

• 规则

  border-image: url(图片路径) 上 右 下 左 平铺方式;
  

• 参数

  • 图片路径
    • 图片要有四条边，中间挖空
    • 图片的每条边宽度要和相应方向边框相同
  • 四方向
    • 指在这四条边上的切割宽度
    • 可只写一个，默认 4 个配上
  • 平铺方式
    • repeat
      • 4 条边的小方块不断重复，重复多了，最后对不上的部分会被剪切掉
    • round
      • 4 条边的小方块不断重复，最后对不上的也要通过拉伸或压缩图片解决，完美
    • stretch
      • 4 条边的小方块会被拉伸，要多长就拉多长

• 派生属性

  • border-方向-image
    • 可以为四条边分别按上面的设置