这篇文章我们主要阐述两个方面的内容：1.边框圆角 2.文本阴影和边框阴影
在上一篇文章中，我们详细了说明了盒模型的使用，并且使用盒模型完成了页面内容的基本布局，它的效果如下：
这个效果还略显单调，我们希望每个li元素能够显示更立体一些，例如我们可以为其添加边框，同时为其添加适合的圆角。
边框圆角的添加
每一个元素都拥有4个角，分别是 左上，右上，右下，左下
添加边框的语法也很简单：border-radius:像素|百分比;
通过这个样式就能设置边框圆角了，百分比是相对于父元素的宽度或者高度，简单说，水平方向上参照元素的宽度，垂直方向上参照元素的高度。
我们先感受一下边框圆角的添加及结果：
div{
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 60px;
}
我们看到，如果为元素添加border-radius就能为元素添加边框圆角的效果，那么圆角到底是如何添加的呢，有没有什么规律可言呢？下面我们一起来分析一下。
我们以某个角为例(如右上角)来说明圆角的添加原理
1.以右上角角点做为参考点，往水平轴和垂直轴延伸指定的距离(60px)
2.延伸产生了相交点，以这个点做为圆心，绘制与元素相切的内切圆
下面，我们为li元素中的a标签添加边框，同时设置圆角
.grame .grame_content li >a {
width: 100%;
display: block;
/* 设置边框 */
border:1px solid #eee;
/* 添加合适的边框圆角 */
border-radius: 6px;
/* 设置底部文本的间距 */
padding-bottom: 5px;
}
这样我们就通过两个简单的样式，为元素添加了边框和圆角。
上面就已经简单的介绍了圆角的添加及实现的基本的原理，只不过，在以后的开发过程中，我们有些时候可能需要为元素添加更为复杂的圆角，如每个角的圆角值不一样，这又如何实现呢？下面我们补充说明下圆角添加时的其它细节。
首选来关注一下border-radius后面的值的数量所带来的差异,单位以px为例
1.border-radius:(a) px; 代表元素的四个角都有指定的圆角
2.border-radius:(a) px (b) px; 第一个值代表左上和右下，第二个值代表右上和左下
3.border-radius:(a) px (b) px (c) px; 第一个值代表左上，第二个值代表右上和左下，第三个值代表右下
4.border-radius:(a) px (b) px (c) px (d) px; 第一个值代表左上，第二个值代表右上，第三个值代表右下，第四个值代表左下
div {
width: 200px;
height: 200px;
background-color:
rgb(199, 38, 26);
/* 设置了四个值，分别代表左上，右上，右下，左下 */
border-radius: 20px 40px 60px 80px;
}
其次，我们也可以同时设置某个角两个方向上不同的圆角值，这种使用场景相对不多见。
它的语法：border-radius:像素 / 像素
反斜杠 / 之前 设置的都是 边角的水平半径
反斜杠 / 之后 设置的都是 边角的垂直半径
div {
width: 600px;
height: 600px;
background-color: aqua;
border-radius: 90px / 150px ;
}
我们平时在浏览一些网页的时候，经常看到一些元素当鼠标上移的时候，会出现一些柔和的阴影效果，这种效果可以使用页面更丰富，也更利于用户体验，下面我们也来深度着为元素添加阴影效果。
常见的阴影的添加有两种：文本阴影和盒子阴影(边框阴影)。
首先我们来了解一下文本阴影的添加。顾名思义，文本阴影主要是为文本来添加阴影效果，可以使用文本看起来更立体。它的语法非常的简单：
text-shadow: 水平偏移 垂直偏移 模糊值 颜色 ;参数说明：
水平偏移和垂直偏移参照当前的虚拟坐标系，也就是说往右是水平方向的正值，向下是垂直方向的正值，反过来类似。
水平偏移和垂直偏移可以设置阴影偏移的方向。
模糊值：可以产生柔和的边缘，值越大，阴影越柔和，越透明，默认值为0，没有模糊
颜色：设置阴影的颜色，默认值为黑色
div {
width: 600px;
height: 300px;
border:1px solid #ccc;
font-size: 80px;
color: red;
text-shadow: 5px 5px 2px #000;
}
于是，我们可以考虑为卡其漫画名称添加些许的阴影，让其看起来有点立体的感觉：
.grame .grame_content li p {
padding-top: 12px;
padding-left: 8px;
font-size: 16px;
color: #4c4c4c;
/* 添加文本阴影 */
text-shadow: 1px 1px #ccc;
}
这里我还想实现一个效果：鼠标上移后我希望当前li元素能够有一个独特的效果，就像下面这样：
这个时候就需要知道如何为盒子添加阴影了。
首先，盒子阴影的添加的语法 和文本阴影非常相似：
box-shadow:水平偏移 垂直偏移 模糊值 阴影外延值 颜色 内外阴影;其中，水平偏移，垂直偏移和模糊值和文本阴影的设置一致。这里多出来是“阴影外延值”和“内外阴影”。阴影外延值是指阴影可以向外延伸，设置的值越大，往外延伸得越多。内外阴影是功能是设置阴影为内阴影，默认情况下，盒子阴影为外阴影(盒子外面)，如果希望阴影为内阴影(盒子里面)，则需要将内外阴影的属性值设置为inset.
.grame .grame_content li:hover > a {
// 鼠标上移a元素出现盒子阴影
box-shadow: 0px 0px 3px 0px rgb(85, 105, 172);
}
这里也演示一下内阴影的效果：为了做得更完整，这里为盒子添加两个阴影(理论上我们可以添加任意个阴影效果，并且这些效果会叠加，文本阴影也是一样可以添加多重阴影效果)
div {
width: 200px;
height: 300px;
border:1px solid #ccc;
box-shadow: 2px 2px 2px 0px red inset,-2px -2px 2px 0px green inset;
}
好了，文章到这里，已经介绍了圆角的添加和阴影的添加，同时也已经完成我们想要的页面效果：每个a元素有边框圆角，同时鼠标上移时出现立体化效果的阴影。各位有时间可以亲自试一下，感受一下神奇的css3效果。
最后的效果如下：
预告：下篇文章中，我们将会详细介绍 背景样式的添加和使用
