---
title: "css3笔记——边框border"
description: "css1中便有border-color属性，css3中增强了其功能，**支持多个颜色设置，如果设置n个颜色值，且边框宽度为n像素，那么每个颜色占1个像素，依次显示在边框上。若边框宽度像素数量大于颜色个数，则除最后一个颜色外，其余颜色占1个像素的宽度，其余宽度被最后一个颜色占有**。"
url: "https://hicc.pro/p/blog/css3-border"
author: "tyler wang"
published: "2012-09-23T19:46:08.000Z"
updated: "2024-02-24T09:10:46.000Z"
category: "blog"
tags:
  - "border-color"
  - "border-image"
  - "border-radius"
  - "css"
  - "css3"
lang: "zh-CN"
site: "Hipo日志"
---

# css3笔记——边框border

## 一 border-color

css1中便有border-color属性，css3中增强了其功能，**支持多个颜色设置，如果设置n个颜色值，且边框宽度为n像素，那么每个颜色占1个像素，依次显示在边框上。若边框宽度像素数量大于颜色个数，则除最后一个颜色外，其余颜色占1个像素的宽度，其余宽度被最后一个颜色占有**。

- `border-color`派生的子属性：
- `border-top-color`
- `border-right-color`
- `border-bottom-color`
- `border-left-color

而对于边框的宽度不同情况如下图示

![border](https://image.hicc.pro/wp-content/uploads/2012/09/border1.jpg "border1")

此种情况各个边框在分界处的角度与边框宽度的比例成正比。

还需要注意的是，在同时写了border-color和其派生的属性的情况下，对于支持css3的浏览器，派生属性的优先级高，不支持其css3属性的浏览器忽略派生属性，但是若同时有单一颜色的border-color（为了优雅降级）和多个颜色的border-color，浏览器只会解析单一颜色的border-color。因此推荐的写法是，**降级的色使用border-color，多色的使用派生属性**。

## 二 border-image

在css3中新增了border-image属性，可以在边框中使用图片，此属性**Safari和chrome支持，FireFox3.5、Opera10.5才开始支持ie9及其一下不支持。**

其语法为
```css
border-image:none | <image> [ <number> | <percentage> ] {1,4} [ / <border-width> {1,4}]
```

- none 默认值，表示边框无图像
- `<image>`  使用绝对或者相对地址指定边框背景图
- `<number>` 设置边框宽度或者边框背景图像大小，使用固定像素值表示。
- `<percentage>` 设置边框背景图像的大小，使用百分比表示

**注：当table的border-collapse设置为collapse时候，border-image和下文的border-radius属性无效。**

其派生的属性有

- `border-top-image`
- `border-right-image`
- `border-bottom-image`
- `border-left-image`
- `border-top-left-image`
- `border-top-right-image`
- `border-bottom-left-image`
- `border-bottom-right-image`
- `border-image-source`:设置边框背景图像地址。
- `border-image-slice`：定义如何裁切背景图像，与背景图像的定位功能不同。
- `border-image-repeat`：定义边框背景图像的重复性。
- `border-image-width`：定义边框背景图像的显示大小（即边框显示大小）。浏览器还是使用border-width实现相同的功能。
- `border-image-outset`：定义边框背景图像的偏移位置（留待以后实例验证）。

此属性算是css中比较复杂的属性了，特别是图片裁切的有点复杂，可以到[css3笔记——border-image-slice属性介绍以及各个浏览器的不同呈现](/p/blog/css3-border-image-slice)查看介绍和实例。

## 三 border-radius

可以设置边框的圆角样式，其语法为`border-radius: none [ <length> {1,4} ]`

- none 默认值
- `<length>` 由数字和单位组成，不可为负值。

其派生的子属性有（以下属性的顺序也表示了若border-radius值为四个时候的解析顺序，其它个数属性值的解析和margin等的解析原则一样）：

- `border-top-left-radius`
- `border-top-right-radius`
- `border-bottom-right-radius`
- `border-bottom-left-radius`

`border-radius`属性的值可以为两个值，第一个表示水平半径，第二个表示垂直半径，当只有一个值的时候，表示水平半径和垂直半径相同。

因为radius属性的半径值a和border的宽度值b的不同会产生不同的效果，对此我的理解便是：

首先浏览器依据圆角的位置（左上，右上····）和radius的半径形成各自的扇形区域，扇形的曲线内切与边框的最外边线，再根据边框的宽度进行圆角化**。**

若a>b 则在扇形的范围内边框以a为外边半径，a-b为内边半径变形成圆环（如下图示）。

![border](https://image.hicc.pro/wp-content/uploads/2012/09/border2.jpg "border2")

若`a<=b` 则是边框在扇形曲线以外的部分被切切，边框的内边仍是直角（如下图示）。

![border](https://image.hicc.pro/wp-content/uploads/2012/09/border3.jpg "border3")

总体来说浏览器是以**边框的宽度保持不变，使之尽量平滑**的原则来处理圆角。

![border](https://image.hicc.pro/wp-content/uploads/2012/09/border4.jpg "border4")

最后有兴趣可以查看实例[demo](http://hicc.me/css/css3-border.html)。

---

原文 / Source: <https://hicc.pro/p/blog/css3-border>