弧形角
圆角效果可是几年前Web 2.0 网页的招牌式设计。当时，实现简单的圆角要用复杂的JavaScript，或者得用嵌套的DIV 和丝毫不差的图片定位。而现在，则只要一行CSS 就能搞定了。
最简单语法形式如下。
border-radius:10px;
这样，盒子的四角都会变成半径为10 像素的圆角。
如果要单独设定每个角的半径，也可以在上面的简写属性中按顺序依次指定。只不过，现在指定的是角而不是边，所以“上、右、下、左”的顺序就不适用了，而是要改用“左上、右上、右下、左下”。
另外，也可以像下面这样分别设定水平和垂直半径：
border-radius:10px / 20px;
如果你想给每个角都设定不同的水平和垂直半径，写法如下：
border-radius:10px 6px 4px 12px / 20px 12px 8px 24px; /* 4 个水平值，4 个垂直值 */
最后提醒大家，弧形角不一定要通过边框才能显示出来。前面例子，菜单的圆角就是通过元素的背景色而非边框显现出来的。
盒阴影
HTML 元素的阴影，同样是CSS3 被广泛实现之前很难做出来的一个效果。当时，要给元素添加阴影效果，必须用图片和DIV 配合，还要耐心地调整，而现在则只要一行CSS 声明即可。
最简单语法形式如下。
box-shadow:4px 4px 5px 8px #aaa inset;
box-shadow 属性的这几值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴影位于边框内部（默认位于边框外部，即outset）。
最低限度，必须设定水平偏移量、垂直偏移量和颜色，这样会得到一个与元素宽度和高度大小一致且为指定颜色的硬边阴影。如果水平和垂直偏移量是负值，阴影就会出现在元素左上方。inset 关键字会把阴影放到盒子内部。另外，box-shadow 还支持多个阴影声明。
居中没有宽度的元素
在一个元素内居中另一个元素有时候会很困难。对于常规、静态定位的元素，可以让它向左或向右浮动，或者使用text-align 属性让它在父元素内居左、居右或居中。还可以利用自动外边距（margin:0 auto）来居中元素。这些方法的问题在于，要居中的元素必须是有宽度的。像这里用于构成菜单的HTML 列表，它可能是根据数据库信息动态生成的，或者说将来有可能手工编辑，总之你不可能提前设定它的宽度。
在display 属性的值中，inline-block 具有一些特殊的混合行为。正如它的名字所暗示的，它既有块级元素的特点，也有行内元素的行为。从块级元素角度说，可以为它设定外边距和内边距，也可以通过它简便而有效地包围其他块级元素。从行内元素角度看，它会收缩包裹自己的内容，而不是扩展填充父元素。换句话说，inline-block 元素的宽度始终等于其内容宽度。这种元素还有一个特点，就是可以包围浮动元素。不过，这种元素也有一个问题，即不能给它的外边距设定auto 值——而这恰恰又是在更大的容器内居中元素的最简单方法。
解决方案就是为要居中元素的父元素（这里的nav）应用text-align:center，为要居中的元素（这里的ul）设定display:inline-block，让它包含列表项。这样设定就可以得到我们想要的结果：没有固定宽度的元素也能在其父元素内居中。如前面代码开头加粗的CSS 声明所示，我们就是这么做的。现在菜单完美居中了，因为其父元素nav 忽略了两端绝对定位的元素，扩展到了与header 同宽。
垂直居中
用CSS 实现垂直居中也不简单。如果你想在一个固定高度的元素内垂直居中一行文本，可以把这一行文本的line-height 设定为该元素的高度。假设元素高度为300 像素，可以这样写：
text-align:center; /*水平居中*/
line-height:300px; /*垂直居中：行高=容器高度*/
如果想垂直居中其他元素，比如图片，可以将容器的display 属性设定为table-row，再设定（只对单元格有效的）vertical-align 属性为middle，比如：
display:table-cell; /*借用表格的行为*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
尽管这些方案都不够自然，但CSS 没提供什么垂直定位元素的属性，也就只能这么将就了。
文本阴影
文本阴影与本章前头讲过的盒阴影很相似，它的语法如下：
text-shadow:4px 4px 5px #aaa;
text-shadow 这几值的含义按顺序分别是：水平偏移量、垂直偏移量、模糊量和颜色。与盒阴影不同的是，文本阴影没有扩展量。最低限度，你得提供水平偏移量、垂直偏移量和颜色值。如果水平和垂直偏移量是负值，阴影就会出现在文本左上方。另外，text-shadow 还支持多个阴影声明。
CSS3 变换
如果你用过Adobe Illustrator 或Fireworks 等平面图形设计软件，可能知道对文本和其他元素进行旋转、缩放和斜切变换。现在，通过CSS3 变换在浏览器中也能实现同样的效果了。
CSS3 为变换规定了两个属性：transform 和transform-origin。先说说transform。
transform 属性能够调用函数，调用不同的变换函数可以实现不同形式的变换，而通过传入的参数值可以控制变换的结果。通过transform 属性调用变换函数的语法如下：
transform:函数名(数值或x、y 值);
以下是CSS3 规定的变换函数。
- scale：用于放大或缩小元素（指定大于1 的值放大元素，小于1 的值缩小元素），如transform:scale(1.5)。
- rotate：根据指定的度数旋转元素（正值顺时针旋转，负值逆时针旋转），如transform:rotate(-30deg)。
- skew：让元素在x 轴和y 轴方向倾斜（只指定一个值，y 轴不受影响），如transform:skew(5deg, 50deg)。
- translate：根据指定的距离沿x 轴和y 轴平移对象（很像相对定位，因为对象初始占据的空间会保留），如transform:translate(-50px, 20px)。
transform-origin 属性设定元素围绕其变换的原点。默认情况下，这个点是元素垂直和水平方向的中心点。因此，如果你旋转元素而未另行指定原点，就会像在元素中心点插进一根大头针一样，然后元素围绕该点旋转。可以使用transform-origin 属性及位置关键字（left、center、right、top 和bottom 等）另行设定原点，而使用正、负数字甚至可以把原点设定到元素边界之外。
以下是实战代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<div id="wrapper">
<header>
<section id="title">
<h1>Stylin’ with CSS</h1>
<h2>The Blog and Books of Charles Wyke-Smith</h2>
</section>
<nav class="menu">
<ul>
<li class="choice1">
<a href="#">Power</a>
</li>
<li class="choice2">
<a href="#">Money</a>
</li>
<li class="choice3">
<a href="#">Love</a>
</li>
<li class="choice4">
<a href="#">Fame</a>
<ul>
<li>
<a href="#">Sports Star</a>
</li>
<li>
<a href="#">Movie Star</a>
</li>
<li>
<a href="#">Rock Star</a>
</li>
<li>
<a href="#">Web Designer</a>
</li>
</ul>
</li>
<li class="choice5">
<a href="#">Language</a>
</li>
</ul>
</nav>
<form class="search" action="#" method="post">
<label for="user_name">search</label>
<!-- 标注的for属性与文本框ID相同 -->
<input type="text" id="user_name" name="user_name" placeholder="search" />
</form>
</header>
<section id="feature_area">
<article id="blog_leadoff">
<div class="inner">
<h4>September 7, 2012</h4>
<a href="#">
<h3>Managing CSS Classes with jQuery</h3>
</a>
<img src="images/charles_wyke-smith.jpg" alt="Charles Wyke-Smith
photo" />
<p>Well at least you didn't forget the Bosses Document. Wouldn't want to get in trouble with the Boss. You've
a great job, working for the Trans Global Bank after all. Offices all over the world don't you know.
Well time to check your Anti-Virus program for updates. Hmmm it says no updates kneeded. You notice
the miss-spelling but what the heck, those things happen. Geez the computer is really slow! You decide
to reboot, hoping that will fix it. Gripes, now it won't even boot! At least there's a little extra
money in the ole Bank Account to get it fixed. The above is fiction. No animals were harmed. But
it's scary huh to think it could happen. Granted it's a worse case scenario, but I wonder...</p>
</div>
</article>
<aside>
<form autocomplete="off" class="signin" action="process_form.php" method="post">
<!-- 必要的<form>标签 -->
<fieldset>
<!-- 作为表单控件的容器 -->
<!-- 控件组的标题 -->
<legend>
<span>Sign In for Code and Updates</span>
</legend>
<section>
<!-- 用于为控件、标注和说明添加样式的外包装 -->
<!-- 与控件ID 同名的for 属性将标注与控件关联起来 -->
<label for="email">Email</label>
<!-- type 属性的text 值表明这是文本框 -->
<input type="text" id="email" name="email" />
</section>
<section>
<label for="password">Password</label>
<input type="password" id="password" name="password" maxlength="20" />
<!-- 密码框中的字符显示为掩码 -->
<p class="direction">Wrong user name or password</p>
</section>
<section>
<!-- 提交按钮 -->
<input type="submit" value="Sign In" />
<p class="signup">Not signed up?
<a href="#">Register now!
</a>
</p>
</section>
</fieldset>
</form>
<nav>
<h3>Recent Articles</h3>
<!-- 博文链接 -->
<ul>
<li>
<a href="#">Z-index—Layers of Confusion</a>
</li>
<li>
<a href="#">Box-Image Techniques</a>
</li>
<li>
<a href="#">Shadow FX with CSS3</a>
</li>
</ul>
</nav>
</aside>
</section>
<section id="book_area">
<article class="left">
<div class="inner">
<h3>HTML5 + CSS3</h3>
<!-- 要旋转的文字 -->
<img src="images/stylin_cover1.png" alt="Stylin' with CSS cover" />
<aside>
<!-- 弹出层 -->
<ol>
<li>
<a href="#">Download the Code</a>
</li>
<li>
<a href="#">Table of Contents</a>
</li>
<li>
<a href="#">Buy this Book</a>
</li>
</ol>
</aside>
</div>
</article>
<article class="left">
<div class="inner">
<h3>HTML5 + CSS3</h3>
<!-- 要旋转的文字 -->
<img src="images/stylin_cover2.png" alt="Stylin' with CSS cover" />
<aside>
<!-- 弹出层 -->
<ol>
<li>
<a href="#">Download the Code</a>
</li>
<li>
<a href="#">Table of Contents</a>
</li>
<li>
<a href="#">Buy this Book</a>
</li>
</ol>
</aside>
</div>
</article>
<article class="right">
<div class="inner">
<h3>HTML5 + CSS3</h3>
<!-- 要旋转的文字 -->
<img src="images/stylin_cover3.png" alt="Stylin' with CSS cover" />
<aside>
<!-- 弹出层 -->
<ol>
<li>
<a href="#">Download the Code</a>
</li>
<li>
<a href="#">Table of Contents</a>
</li>
<li>
<a href="#">Buy this Book</a>
</li>
</ol>
</aside>
</div>
</article>
<article class="right">
<div class="inner">
<h3>HTML5 + CSS3</h3>
<!-- 要旋转的文字 -->
<img src="images/stylin_cover4.png" alt="Stylin' with CSS cover" />
<aside>
<!-- 弹出层 -->
<ol>
<li>
<a href="#">Download the Code</a>
</li>
<li>
<a href="#">Table of Contents</a>
</li>
<li>
<a href="#">Buy this Book</a>
</li>
</ol>
</aside>
</div>
</article>
</section>
<footer>
<p>A CSS template from
<a href="http://www.stylinwithcss.com">
<em>Stylin' with CSS, Third Edition</em>
</a> by Charles Wyke-Smith</p>
<nav>
<ul>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Contact Charles</a>
</li>
</ul>
</nav>
</footer>
</div>
<!-- wrapper 结束 -->
</body>
</html>
body {
font-family: helvetica, arial, sans-serif;
background: #efefef;
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto 20px;
}
/* logo */
header {
position:relative; /*为页面标题和搜索表单提供定位上下文*/
height:70px; /*固定高度，包围绝对定位元素*/
margin:10px 0;
background:#fff;
border-radius:20px 0px 20px 0px; /*顺序：左上、右上、右下、左下*/
box-shadow:0 12px 8px -9px #555; /*负扩展值把阴影定位到盒子内部*/
padding:1px; /*防止子元素外边距叠加*/
}
header section#title {
position:absolute;
width:300px; /*宽到足以不让文本折行*/
height:65px; /*高到足以容纳两行文本*/
left:0px; /*左上角定位*/
top:0;
}
header h1 {
padding:0px 12px;
font-family:Times, helvetica, sans-serif;
font-weight:900;
font-size:2.2em;
line-height:1;
letter-spacing:-.025em;
color:#4eb8ea;
margin:20px 0px 0px;
}
header h2 {
padding:0px 12px;
font-family:Times, helvetica, sans-serif;
font-weight:400; /*设定下载字体的粗细*/
font-size:.9em; line-height:1;
letter-spacing:-.025em;
color:#333;
margin:0px;
}
/* 搜索框 */
form.search {
position:absolute; width:150px; /*宽到足以容纳扩展后的搜索框*/
top:23px; right:20px; /*相对于页眉右上角定位*/
}
.search input {
float:right; width:70px;
padding:2px 0 3px 5px;
border-radius:10px 0px 10px 0px;
font-family:Times, helvetica, sans-serif;
font-weight: 400;
font-size:1em;
color:#888;
outline:none; /*去掉默认的轮廓线*/
-webkit-transition:2s width; /*搜索框过渡动画，别忘了带其他厂商前缀的属性*/
}
.search input:focus { width:140px;}/*在获得焦点时扩展到这么宽*/
.search label{display:none;}
form.search input {background-color:#fff;}
/* 修改输入框placeholder文字默认颜色 */
form.search input::-webkit-input-placeholder {color:#ccc;}
/* 菜单 */
nav.menu {
margin:19px auto;
padding:0;
text-align:center; /*在容器内居中菜单*/
font-size:.8em;
}
nav.menu > ul { display:inline-block;} /*收缩包紧列表项*/
nav.menu li {
float:left; /* 让菜单项水平排列*/
list-style-type:none; /*去掉默认的项目符号*/
position:relative; /*为子列表提供定位上下文*/
}
nav.menu li a {
display:block; /*让链接填满列表项*/
padding:.25em .8em;
font-family:Times, helvetica, sans-serif;
font-style: normal;
font-weight:600;
font-size:1.2em;
text-align:left;
color:#fff;
text-decoration:none; /*去掉链接的下划线*/
-webkit-font-smoothing: antialiased; /*在WebKit 浏览器中平滑字体*/
}
nav.menu li.choice1 a {background:#f58c21;}
nav.menu li.choice2 a {background:#4eb8ea;}
nav.menu li.choice3 a {background:#d6e636;}
nav.menu li.choice4 a {background:#ee4c98;}
nav.menu li.choice5 a {background:#f58c21;}
nav.menu li:hover > a {
color:#555;
border-color:#fff;
border:0;
}
nav.menu li:last-child a {border-bottom-right-radius:10px;}
nav.menu li:first-child a {border-top-left-radius:10px;}
nav.menu li ul {
opacity:0; visibility:hidden; /* 隐藏下拉菜单*/
position:absolute; /*相对于父菜单定位*/
width:12em; /*下拉菜单宽度*/
left:0; /*左边与父菜单项左边对齐*/
top:100%; /*顶边与父菜单项底边对齐*/
-webkit-transition: 1s all; /*设定过渡效果*/
-moz-transition: 1s all;
transition: 1s all;
padding:0;
}
nav.menu li:hover > ul {
opacity:1; visibility:visible; /*两个属性都会产生过渡动画*/
}
nav.menu li li {
float:none; /*去掉继承的浮动，让菜单项上下堆叠*/
}
nav.menu li li:first-child a {border-radius:0;}
nav.menu li li:last-child a {border-bottom-left-radius:10px;}
/* 主要添加Modernizr插件 */
.no-csstransitions nav.menu li ul { /*针对不支持过渡的浏览器*/
visibility:visible; /*覆盖过渡声明*/
opacity:1; /*覆盖过渡声明*/
display:none; /*如果不支持过渡，就直接隐藏菜单*/
}
.no-csstransitions nav.menu li:hover > ul {
display:block; /*在父菜单项悬停时显示菜单*/
}
/* 专题 */
section#feature_area {
overflow:hidden; /*包围浮动的子元素*/
margin:16px 0 0; /*在页眉与专题区之间留出间隙*/
padding:0 0 10px;
}
section#feature_area article {float:left; width:66%;}
section#feature_area aside {float:right; width:34%;}
section#feature_area article .inner {/*带圆角和阴影的容器*/
padding:12px;
background:#fff;
border-radius:20px 0;
box-shadow:0 12px 8px -9px #555;
}
section#feature_area article a {text-decoration:none;}/*博文标题链接*/
section#feature_area article img { /*照片*/
float:left;
padding:0 10px 10px 0;
}
section#feature_area article h4 { /*日期*/
font-family:Times, helvetica, sans-serif;
font-style:normal;
font-weight:400;
font-size:1em;
color:#f58c21;
letter-spacing:-.025em;
}
section#feature_area article h3 { /*博文标题*/
font-family:Times, helvetica, sans-serif;
font-style:normal;
font-weight:700;
font-size:1.75em;
color:#555;
margin:0px 0 12px 0px;
letter-spacing:-.05em;
}
section#feature_area article#blog_leadoff p { /*博文内容*/
font-family:Times, helvetica, sans-serif;
font-style: normal;
font-weight:400;
font-size:1.1em;
line-height:1.5em;
color:#616161;
margin:0 0px;
text-align:justify;
}
section#feature_area article#blog_leadoff p::first-letter { /*首字母下沉*/
font-family:Times, helvetica, sans-serif;
font-style: normal;
font-weight:700;
font-size:4.5em;
float:left;
margin:.05em .05em 0 0;
line-height:0.6;
text-shadow:1px 3px 3px #ccc; /*IE10 及以上版本支持文本阴影*/
}
section#feature_area article#blog_leadoff p::first-line { /*首行小型大写字母*/
font-variant:small-caps;
font-size:1.2em;
}
section#feature_area aside { /*右栏*/
width:34%;
float:right;
}
form.signin {
width:19em; /*表单的整体宽度*/
float:right;
background:#fff;
border-radius:10px 0 10px 0;
box-shadow: 0 12px 8px -9px #555;
}
.signin fieldset { border:0; margin:10px 14px;}/*去掉默认的边框*/
.signin legend span {
font-family:Times, helvetica, sans-serif;
font-weight:700; font-size:1.3em; line-height:1.1em;
color:#4eb8ea;
letter-spacing:-.05em;
}
.signin section {
overflow:hidden; /*包围控件和标注*/
padding:.25em 0; /*表单元素的间距*/
}
.signin section label {
font-family:Times, helvetica, sans-serif;
font-weight:400;
float:left;
width:5em; /*标注栏的宽度*/
margin:.5em .3em 0 0; /*外边距保持文本与控件的间距*/
line-height:1.1;
color:#555;
}
.signin section input {
float:right;
width:10.5em; /*控件栏的宽度*/
margin:.2em 0 0 .5em;
padding:3px 10px 2px; /*输入文本与控件的间距*/
color:#555;
font-size:.8em;
outline:none; /*去掉默认的轮廓线*/
border-radius:10px 0 10px 0;
}
input:-webkit-autofill { color:#fff !important; } /*去掉WebKit 默认的黄色背景*/
.signin section input[type=submit] {
float:right; /*将按钮与控件右边对齐*/
width:auto; /*重设按钮宽度*/
margin:0 2px 3px 0;
padding:0px 8px 3px;
font-size:1em;
font-weight:800;
color:#fff;
border:none;
background-color:#d6e636;
box-shadow:1px 1px 2px #888;
}
.signin section p{ /*内容为"not signed up?"*/
float:right;
clear:both;
margin:.2em 0 0;
text-align:right;
font-size:.8em;
line-height:1;
color:#555;
}
.signin section p a { color:#333; }/*到注册表单的链接*/
.signin section p a:hover {
color:#777;
text-decoration:none;
}
.signin section p.direction.error { /*错误消息*/
display:block;
color:#f00; /*添加error 类后，把说明文字变成红色*/
}
.signin section p.direction { display:none; } /*隐藏错误消息*/
section#feature_area nav {
width:19em; /*容器整体宽度*/
float:right;/*与区域右边对齐*/
margin:15px 0 0; /*上方间距*/
padding:.6em 0em .75em; /*链接上下的间距*/
background:#fff;
border-radius:10px 0 10px 0;
box-shadow: 0 12px 8px -9px #555;
}
#feature_area nav h3 {
padding:0 14px 0; /*标题左右的空间*/
font-family:Lato, helvetica, sans-serif;
font-weight:700;
font-size:1.3em;
text-align:left;
color:#aaa;
letter-spacing:-.05em;
}
#feature_area nav ul { margin:0em 0 0 20px; }
#feature_area nav li {
padding:.7em 0 0 2em;
position:relative; /*项目符号的定位上下文*/
list-style-type:none
}
#feature_area nav li:before { /*定制项目符号*/
content:""; /*用空字符串，因为不需要实际内容*/
position:absolute; /*相对于列表项定位*/
height:10px; /*项目符号大小*/
width:10px;
left:12px; /*定位项目符号*/
top:12px;
border-radius:5px 0 5px 0; /*项目符号形状*/
background-color:#d6e636; /*项目符号颜色*/
box-shadow:1px 1px 2px #888;
}
#feature_area nav li a {
display:block; /*链接与列表项同宽*/
text-decoration:none; /*去掉默认的下划线*/
font-size:.9em;
color:#616161;
}
#feature_area nav li a:hover { color:#000; }
section#book_area { /*与布局同宽*/
clear:both;
border-radius:20px 0px 20px 0px;
border:1px solid #f58c21;
margin:8px 0 16px; /*上下间距*/
overflow:hidden;
}
#book_area article { /*四本书四栏*/
float:left;
width:25%;
padding:60px 0;
background:none;
}
#book_area article .inner { /*封面外包装*/
position:relative; /*为弹出层提供定位上下文*/
width:140px; /*包装每一本书*/
margin:0 auto; /*在各自article 元素内居中每一本书*/
}
#book_area .inner h3 { /*旋转文字*/
position:absolute;
width:160px;
left:104%; top: 68px; /*把文字定位在图书右侧*/
transform:rotate(-90deg); /*旋转文字需要使用带厂商前缀的属性*/
transform-origin:left bottom; /*设定旋转中心点，需要带厂商前缀的属性*/
color:#ccc;
font-size:1.4em;
font-family:Times, helvetica, sans-serif;
font-style:normal;
font-weight:900;
text-align:left;
}
#book_area article img { box-shadow: 0 12px 8px -9px #555; }/*封面阴影*/
/*弹出层共享样式开始*/
#book_area article aside {
display:none; /*隐藏弹出层*/
position:absolute; /*相对于包含图片的内部div*/
z-index:2;
width:200px; /*弹出层宽度*/
background:#fff;
padding:10px 2px 5px; /*弹出层内容边距*/
border:2px solid #f58c21;
border-radius:10px 0px 10px 0px;
box-shadow:4px 4px 16px #555;
color:#555;
font-family:"Source Sans Pro", helvetica, sans-serif;
font-size:.8em;
line-height:1.5em;
}
#book_area article:hover aside { display:block; }/*鼠标悬停于封面时显示弹出层*/
#book_area article aside li {
padding:.25em 0 .75em 1em; /*列表项的垂直间距和左边距*/
list-style-type:none; /*去掉默认的项目符号*/
line-height:1.2em;
}
#book_area article aside li a { /*链接文本*/
text-decoration:none;
font-size:1.2em;
color:#616161;
}
#book_area article aside li a:hover { /*悬停时突显链接*/
color:#333;
} /*弹出层共享样式结束*/
#book_area article.left aside {/*左侧两本书*/
left:84%; top:14px; /* 把弹出层定位在图片右侧*/
}
#book_area article.right aside {/*右侧两本书*/
right:84%; top:14px;/*把弹出层定位在图片左侧*/
}
#book_area article aside:after { /*橙色三角形*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
top:33px;
border:12px solid;
height:0px; width:0px; /*收缩边框创造三角形*/
}
#book_area article.left aside:after { /*左侧图书弹出层的三角形定位及颜色*/
right:100%;
border-color:transparent #f58c21 transparent transparent;
}
#book_area article.right aside:after { /*右侧图书弹出层的三角形定位及颜色*/
left:100%;
border-color:transparent transparent transparent #f58c21;
}
#book_area article aside:before { /*白色三角形*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
border:8px solid;
height:0px; width:0px; /*收缩边框创造三角形*/
z-index:100; /*保证白色三角形在最前面*/
top:37px;
}
#book_area article.left aside:before { /*左侧图书白色三角形的样式、位置和颜色*/
right:100%;
border-color:transparent white transparent transparent;
}
#book_area article.right aside:before { /*右侧图书白色三角形的样式、位置和颜色*/
left:100%;
border-color:transparent transparent transparent white;
}
/* footer */
footer {
padding:.5em 0 .35em 0; /*内容上下的间距*/
text-align:center; /*居中内容*/
border-radius:10px 0px 10px 0px;
background:#fff;
box-shadow:0 12px 8px -9px #555;
}
footer p { /*文本行的样式*/
font-family:Times;
font-weight:400;
font-size:.85em;
letter-spacing:-.05em;
color:#555;
}
footer p a { /*文本行中的链接*/
font-family:Times;
font-style:italic;
font-weight:700;
font-size:1em;
color:#4eb8ea;
text-decoration:none;
}
footer p a:hover {
color:#777;
}
footer ul { /*链接列表*/
display:inline-block; /*收缩包围列表*/
margin:4px 0 0;
}
footer li {
list-style-type:none; /*去掉默认的项目符号*/
float:left; /*让列表项水平排列*/
font-family:Times;
font-weight:400;
font-size:.85em;
}
footer li + li a {
border-left:1px solid #ccc; /*链接分隔线*/
}
footer li a {
text-decoration:none; /*去掉链接默认的下划线*/
color:#aaa;
padding:0 5px; /*链接间距*/
}
footer a:hover {
color:#777;
}
