1. CSS3边框凸起的实现
CSS3提供了几个以box-shadow为基础的属性，可以使边框产生凸起的视觉效果。这些属性包括：
box-shadow
outline
border-image
下面我们将逐个讲解它们的实现方法。
1.1 box-shadow
box-shadow可以用来在元素外围添加阴影效果，通过设置偏移量和模糊半径可以产生凸起的边框效果。例如，下面的代码可以产生一个向外凸起的黄色方框：
.box {
width: 100px;
height: 100px;
background-color: yellow;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.6); /* 水平偏移量为0，垂直偏移量为0，模糊半径为10px，大小为5px */
}
效果如下：
上面的代码中，box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);这一行设置了阴影效果。其中，第一个值表示水平偏移量，第二个值表示垂直偏移量，第三个值表示模糊半径，第四个值表示阴影的颜色和透明度，可以使用rgba()函数来设置。
通过改变不同的值，可以产生不同大小和方向的边框凸起效果。
1.2 outline
outline可以用来为元素添加轮廓线，也可以用来产生边框凸起的效果。例如，下面的代码可以产生一个向外凸起的红色方框：
.box {
width: 100px;
height: 100px;
background-color: yellow;
outline: 5px solid red;
}
效果如下：
上面的代码中，outline: 5px solid red;这一行设置了轮廓线效果。其中，5px表示轮廓线的大小，solid表示轮廓线的样式为实线，red表示轮廓线的颜色。
需要注意的是，outline属性对元素不会产生实际的占据空间，因此会在元素四周产生一种闪烁的效果。
1.3 border-image
border-image可以用来为元素的边框指定一个图片作为边框。图片的一部分会被拉伸，以填充整个边框。通过设置拉伸的比例，可以产生边框凸起的效果。例如，下面的代码可以产生一个向外凸起的蓝色方框：
.box {
width: 100px;
height: 100px;
border: 10px solid transparent; /* 将原来的边框设置为透明 */
border-image: url('border.png') 10 repeat; /* 用border.png作为边框图片，边框大小为10px，将剩余部分平铺 */
}
效果如下：
上面的代码中，border: 10px solid transparent;将原来的边框设置为透明，border-image: url('border.png') 10 repeat;将边框图片设置为border.png，边框大小为10px，当拉伸时将剩余部分平铺。
需要注意的是，border-image属性需要浏览器支持，且在不同浏览器中的实现方法可能存在差异。
2. CSS3边框凸起的案例
下面是一个完整的CSS3边框凸起的案例。在这个案例中，我们使用box-shadow属性来产生边框凸起的效果：
.box {
width: 200px;
height: 200px;
background-color: #eee;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
border-radius: 20px;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
效果如下：
上面的代码中，除了box-shadow属性外，我们还设置了border-radius属性来让元素变为圆角矩形；text-align、line-height、font-size和font-weight属性用来设置元素内部的文字样式。
通过设置不同的属性值，我们可以产生不同形状和颜色的边框凸起效果。
3. 总结
在CSS3中，边框凸起可以通过box-shadow、outline和border-image这几种属性来实现。其中，box-shadow是应用最广泛的一种，可以很容易地控制边框的大小、形状和颜色。在设计过程中，我们可以根据实际需要选择不同的属性来实现不同的效果。