浅谈 CSS3 新特性：Border 边框CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准，且 CSS

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准，且 CSS3 已完全向后兼容，也就是说 CSS3 = CSS2 + CSS3 新增属性。我们先从 CSS3 边框新增属性讲起：

边框

border-radius 圆角

使用 border-radius 属性，你可以给任何元素制作 "圆角"，即使元素没有边框，圆角也可以生效，具体效果受 background-clip 影响。

border-radius 的属性值，定义圆形半径或椭圆的半长轴，半短轴：

长度：<length>，负值无效。
百分数：水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

border-radius 是一个简写属性，可以取 1-4 个值：

border-radius: 10px，四个圆角值都是 10px
border-radius: 10px 20px，第一个字为左上角/右下角（10px），第二个值为右上角与左下角（20px）
border-radius: 10px 15px 20px，第一个值为左上角（10px）, 第二个值为右上角和左下角（15px），第三个值为右下角（20px）
border-radius: 10px 15px 20px 25px，第一个值为左上角（10px），第二个值为右上角（15px），第三个值为左下角（20px），第四个值为右下角（25px）

#rcorners {
  border-radius: 10px 20px 50%;
  background: url(/images/paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 250px;
  height: 150px;
}

box-shadow 盒阴影

几乎可以在任何元素上使用 box-shadow 来添加阴影效果。如果元素同时设置了 border-radius 属性，那么阴影也会有圆角效果。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

inset（可选），使用 inset 关键字会使得阴影落在盒子内部，此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。

blockquote {
  padding: 20px;
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

border-image 边框图片

border-image 属性允许在元素的边框上绘制图像，这使得绘制复杂的外观组件更加简单。

border-image: source slice/width/outset repeat|initial|inherit;

border-image 也是一个简写属性，

border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0
border-image-repeat: stretch

border-image-source

声明图片资源（图片地址、渐变函数 gradient）

border-image-source: url("xx.png");
border-image-source: linear-gradient(red, yellow);

border-image-slice

border-image-slice 属性负责切割图片资源，它会将图片分割为 9 个区域：四个角，四个边（edges）以及中心区域。 四条切片线，从它们各自的侧面设置给定距离（基于引入图片的尺寸），控制区域的大小。

区域 1-4 为角区域（corner region），分别对应边框图形的四个角点。
区域 5-8 边区域（edge region），在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。
区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作背景图像。

border-image-width

border-image-width 用于指定 border-image 的宽度，如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展。

border-image-outset

border-image-outset 属性定义边框图像可超出边框盒的大小。

<length>：设置边框图像与边框内侧的距离，默认为 0。
number：代表相应的 border-width 的倍数

border-image-repeat

border-image-repeat 用于设置图像边界是否应重复或拉伸等

stretch：默认值。拉伸图像来填充区域。
repeat：平铺（repeated）图像来填充区域。
round：类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space：类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围

效果

直接使用图片资源

向内裁取 30px 作为边框图像，边框区域做拉伸处理（默认），边框宽度为 30px。

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

使用的图片素材：

渐变函数生成图片

生成的渐变图片和容器等高等宽。

#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}