弧形角
圓角效果可是幾年前Web 2.0 網(wǎng)頁的招牌式設(shè)計(jì)。當(dāng)時(shí)，實(shí)現(xiàn)簡單的圓角要用復(fù)雜的JavaScript，或者得用嵌套的DIV 和絲毫不差的圖片定位。而現(xiàn)在，則只要一行CSS 就能搞定了。
最簡單語法形式如下。
border-radius:10px;
這樣，盒子的四角都會(huì)變成半徑為10 像素的圓角。
如果要單獨(dú)設(shè)定每個(gè)角的半徑，也可以在上面的簡寫屬性中按順序依次指定。只不過，現(xiàn)在指定的是角而不是邊，所以“上、右、下、左”的順序就不適用了，而是要改用“左上、右上、右下、左下”。
另外，也可以像下面這樣分別設(shè)定水平和垂直半徑：
border-radius:10px / 20px;
如果你想給每個(gè)角都設(shè)定不同的水平和垂直半徑，寫法如下：
border-radius:10px 6px 4px 12px / 20px 12px 8px 24px; /* 4 個(gè)水平值，4 個(gè)垂直值 */
最后提醒大家，弧形角不一定要通過邊框才能顯示出來。前面例子，菜單的圓角就是通過元素的背景色而非邊框顯現(xiàn)出來的。
盒陰影
HTML 元素的陰影，同樣是CSS3 被廣泛實(shí)現(xiàn)之前很難做出來的一個(gè)效果。當(dāng)時(shí)，要給元素添加陰影效果，必須用圖片和DIV 配合，還要耐心地調(diào)整，而現(xiàn)在則只要一行CSS 聲明即可。
最簡單語法形式如下。
box-shadow:4px 4px 5px 8px #aaa inset;
box-shadow 屬性的這幾值分別代表：水平偏移量、垂直偏移量、模糊量、擴(kuò)展量、顏色、陰影位于邊框內(nèi)部（默認(rèn)位于邊框外部，即outset）。
最低限度，必須設(shè)定水平偏移量、垂直偏移量和顏色，這樣會(huì)得到一個(gè)與元素寬度和高度大小一致且為指定顏色的硬邊陰影。如果水平和垂直偏移量是負(fù)值，陰影就會(huì)出現(xiàn)在元素左上方。inset 關(guān)鍵字會(huì)把陰影放到盒子內(nèi)部。另外，box-shadow 還支持多個(gè)陰影聲明。
居中沒有寬度的元素
在一個(gè)元素內(nèi)居中另一個(gè)元素有時(shí)候會(huì)很困難。對(duì)于常規(guī)、靜態(tài)定位的元素，可以讓它向左或向右浮動(dòng)，或者使用text-align 屬性讓它在父元素內(nèi)居左、居右或居中。還可以利用自動(dòng)外邊距（margin:0 auto）來居中元素。這些方法的問題在于，要居中的元素必須是有寬度的。像這里用于構(gòu)成菜單的HTML 列表，它可能是根據(jù)數(shù)據(jù)庫信息動(dòng)態(tài)生成的，或者說將來有可能手工編輯，總之你不可能提前設(shè)定它的寬度。
在display 屬性的值中，inline-block 具有一些特殊的混合行為。正如它的名字所暗示的，它既有塊級(jí)元素的特點(diǎn)，也有行內(nèi)元素的行為。從塊級(jí)元素角度說，可以為它設(shè)定外邊距和內(nèi)邊距，也可以通過它簡便而有效地包圍其他塊級(jí)元素。從行內(nèi)元素角度看，它會(huì)收縮包裹自己的內(nèi)容，而不是擴(kuò)展填充父元素。換句話說，inline-block 元素的寬度始終等于其內(nèi)容寬度。這種元素還有一個(gè)特點(diǎn)，就是可以包圍浮動(dòng)元素。不過，這種元素也有一個(gè)問題，即不能給它的外邊距設(shè)定auto 值——而這恰恰又是在更大的容器內(nèi)居中元素的最簡單方法。
解決方案就是為要居中元素的父元素（這里的nav）應(yīng)用text-align:center，為要居中的元素（這里的ul）設(shè)定display:inline-block，讓它包含列表項(xiàng)。這樣設(shè)定就可以得到我們想要的結(jié)果：沒有固定寬度的元素也能在其父元素內(nèi)居中。如前面代碼開頭加粗的CSS 聲明所示，我們就是這么做的?，F(xiàn)在菜單完美居中了，因?yàn)槠涓冈豱av 忽略了兩端絕對(duì)定位的元素，擴(kuò)展到了與header 同寬。
垂直居中
用CSS 實(shí)現(xiàn)垂直居中也不簡單。如果你想在一個(gè)固定高度的元素內(nèi)垂直居中一行文本，可以把這一行文本的line-height 設(shè)定為該元素的高度。假設(shè)元素高度為300 像素，可以這樣寫：
text-align:center; /*水平居中*/
line-height:300px; /*垂直居中：行高=容器高度*/
如果想垂直居中其他元素，比如圖片，可以將容器的display 屬性設(shè)定為table-row，再設(shè)定（只對(duì)單元格有效的）vertical-align 屬性為middle，比如：
display:table-cell; /*借用表格的行為*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
盡管這些方案都不夠自然，但CSS 沒提供什么垂直定位元素的屬性，也就只能這么將就了。
文本陰影
文本陰影與本章前頭講過的盒陰影很相似，它的語法如下：
text-shadow:4px 4px 5px #aaa;
text-shadow 這幾值的含義按順序分別是：水平偏移量、垂直偏移量、模糊量和顏色。與盒陰影不同的是，文本陰影沒有擴(kuò)展量。最低限度，你得提供水平偏移量、垂直偏移量和顏色值。如果水平和垂直偏移量是負(fù)值，陰影就會(huì)出現(xiàn)在文本左上方。另外，text-shadow 還支持多個(gè)陰影聲明。
CSS3 變換
如果你用過Adobe Illustrator 或Fireworks 等平面圖形設(shè)計(jì)軟件，可能知道對(duì)文本和其他元素進(jìn)行旋轉(zhuǎn)、縮放和斜切變換?，F(xiàn)在，通過CSS3 變換在瀏覽器中也能實(shí)現(xiàn)同樣的效果了。
CSS3 為變換規(guī)定了兩個(gè)屬性：transform 和transform-origin。先說說transform。
transform 屬性能夠調(diào)用函數(shù)，調(diào)用不同的變換函數(shù)可以實(shí)現(xiàn)不同形式的變換，而通過傳入的參數(shù)值可以控制變換的結(jié)果。通過transform 屬性調(diào)用變換函數(shù)的語法如下：
transform:函數(shù)名(數(shù)值或x、y 值);
以下是CSS3 規(guī)定的變換函數(shù)。
- scale：用于放大或縮小元素（指定大于1 的值放大元素，小于1 的值縮小元素），如transform:scale(1.5)。
- rotate：根據(jù)指定的度數(shù)旋轉(zhuǎn)元素（正值順時(shí)針旋轉(zhuǎn)，負(fù)值逆時(shí)針旋轉(zhuǎn)），如transform:rotate(-30deg)。
- skew：讓元素在x 軸和y 軸方向傾斜（只指定一個(gè)值，y 軸不受影響），如transform:skew(5deg, 50deg)。
- translate：根據(jù)指定的距離沿x 軸和y 軸平移對(duì)象（很像相對(duì)定位，因?yàn)閷?duì)象初始占據(jù)的空間會(huì)保留），如transform:translate(-50px, 20px)。
transform-origin 屬性設(shè)定元素圍繞其變換的原點(diǎn)。默認(rèn)情況下，這個(gè)點(diǎn)是元素垂直和水平方向的中心點(diǎn)。因此，如果你旋轉(zhuǎn)元素而未另行指定原點(diǎn)，就會(huì)像在元素中心點(diǎn)插進(jìn)一根大頭針一樣，然后元素圍繞該點(diǎn)旋轉(zhuǎn)?？梢允褂胻ransform-origin 屬性及位置關(guān)鍵字（left、center、right、top 和bottom 等）另行設(shè)定原點(diǎn)，而使用正、負(fù)數(shù)字甚至可以把原點(diǎn)設(shè)定到元素邊界之外。
以下是實(shí)戰(zhàn)代碼：
<!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>
<!-- 標(biāo)注的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>標(biāo)簽 -->
<fieldset>
<!-- 作為表單控件的容器 -->
<!-- 控件組的標(biāo)題 -->
<legend>
<span>Sign In for Code and Updates</span>
</legend>
<section>
<!-- 用于為控件、標(biāo)注和說明添加樣式的外包裝 -->
<!-- 與控件ID 同名的for 屬性將標(biāo)注與控件關(guān)聯(lián)起來 -->
<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>
<!-- 要旋轉(zhuǎn)的文字 -->
<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>
<!-- 要旋轉(zhuǎn)的文字 -->
<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>
<!-- 要旋轉(zhuǎn)的文字 -->
<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>
<!-- 要旋轉(zhuǎn)的文字 -->
<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 >
<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 結(jié)束 -->
</body>
</html>
body {
font-family: helvetica, arial, sans-serif;
background: #efefef;
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto 20px;
}
/* logo */
header {
position:relative; /*為頁面標(biāo)題和搜索表單提供定位上下文*/
height:70px; /*固定高度，包圍絕對(duì)定位元素*/
margin:10px 0;
background:#fff;
border-radius:20px 0px 20px 0px; /*順序：左上、右上、右下、左下*/
box-shadow:0 12px 8px -9px #555; /*負(fù)擴(kuò)展值把陰影定位到盒子內(nèi)部*/
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; /*設(shè)定下載字體的粗細(xì)*/
font-size:.9em; line-height:1;
letter-spacing:-.025em;
color:#333;
margin:0px;
}
/* 搜索框 */
form.search {
position:absolute; width:150px; /*寬到足以容納擴(kuò)展后的搜索框*/
top:23px; right:20px; /*相對(duì)于頁眉右上角定位*/
}
.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; /*去掉默認(rèn)的輪廓線*/
-webkit-transition:2s width; /*搜索框過渡動(dòng)畫，別忘了帶其他廠商前綴的屬性*/
}
.search input:focus { width:140px;}/*在獲得焦點(diǎn)時(shí)擴(kuò)展到這么寬*/
.search label{display:none;}
form.search input {background-color:#fff;}
/* 修改輸入框placeholder文字默認(rèn)顏色 */
form.search input::-webkit-input-placeholder {color:#ccc;}
/* 菜單 */
nav.menu {
margin:19px auto;
padding:0;
text-align:center; /*在容器內(nèi)居中菜單*/
font-size:.8em;
}
nav.menu > ul { display:inline-block;} /*收縮包緊列表項(xiàng)*/
nav.menu li {
float:left; /* 讓菜單項(xiàng)水平排列*/
list-style-type:none; /*去掉默認(rèn)的項(xiàng)目符號(hào)*/
position:relative; /*為子列表提供定位上下文*/
}
nav.menu li a {
display:block; /*讓鏈接填滿列表項(xiàng)*/
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; /*相對(duì)于父菜單定位*/
width:12em; /*下拉菜單寬度*/
left:0; /*左邊與父菜單項(xiàng)左邊對(duì)齊*/
top:100%; /*頂邊與父菜單項(xiàng)底邊對(duì)齊*/
-webkit-transition: 1s all; /*設(shè)定過渡效果*/
-moz-transition: 1s all;
transition: 1s all;
padding:0;
}
nav.menu li:hover > ul {
opacity:1; visibility:visible; /*兩個(gè)屬性都會(huì)產(chǎn)生過渡動(dòng)畫*/
}
nav.menu li li {
float:none; /*去掉繼承的浮動(dòng)，讓菜單項(xiàng)上下堆疊*/
}
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 { /*針對(duì)不支持過渡的瀏覽器*/
visibility:visible; /*覆蓋過渡聲明*/
opacity:1; /*覆蓋過渡聲明*/
display:none; /*如果不支持過渡，就直接隱藏菜單*/
}
.no-csstransitions nav.menu li:hover > ul {
display:block; /*在父菜單項(xiàng)懸停時(shí)顯示菜單*/
}
/* 專題 */
section#feature_area {
overflow:hidden; /*包圍浮動(dòng)的子元素*/
margin:16px 0 0; /*在頁眉與專題區(qū)之間留出間隙*/
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;}/*博文標(biāo)題鏈接*/
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 { /*博文標(biāo)題*/
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 { /*博文內(nèi)容*/
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;}/*去掉默認(rèn)的邊框*/
.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; /*包圍控件和標(biāo)注*/
padding:.25em 0; /*表單元素的間距*/
}
.signin section label {
font-family:Times, helvetica, sans-serif;
font-weight:400;
float:left;
width:5em; /*標(biāo)注欄的寬度*/
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; /*去掉默認(rèn)的輪廓線*/
border-radius:10px 0 10px 0;
}
input:-webkit-autofill { color:#fff !important; } /*去掉WebKit 默認(rèn)的黃色背景*/
.signin section input[type=submit] {
float:right; /*將按鈕與控件右邊對(duì)齊*/
width:auto; /*重設(shè)按鈕寬度*/
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{ /*內(nèi)容為"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; }/*到注冊(cè)表單的鏈接*/
.signin section p a:hover {
color:#777;
text-decoration:none;
}
.signin section p.direction.error { /*錯(cuò)誤消息*/
display:block;
color:#f00; /*添加error 類后，把說明文字變成紅色*/
}
.signin section p.direction { display:none; } /*隱藏錯(cuò)誤消息*/
section#feature_area nav {
width:19em; /*容器整體寬度*/
float:right;/*與區(qū)域右邊對(duì)齊*/
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; /*標(biāo)題左右的空間*/
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; /*項(xiàng)目符號(hào)的定位上下文*/
list-style-type:none
}
#feature_area nav li:before { /*定制項(xiàng)目符號(hào)*/
content:""; /*用空字符串，因?yàn)椴恍枰獙?shí)際內(nèi)容*/
position:absolute; /*相對(duì)于列表項(xiàng)定位*/
height:10px; /*項(xiàng)目符號(hào)大小*/
width:10px;
left:12px; /*定位項(xiàng)目符號(hào)*/
top:12px;
border-radius:5px 0 5px 0; /*項(xiàng)目符號(hào)形狀*/
background-color:#d6e636; /*項(xiàng)目符號(hào)顏色*/
box-shadow:1px 1px 2px #888;
}
#feature_area nav li a {
display:block; /*鏈接與列表項(xiàng)同寬*/
text-decoration:none; /*去掉默認(rèn)的下劃線*/
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 元素內(nèi)居中每一本書*/
}
#book_area .inner h3 { /*旋轉(zhuǎn)文字*/
position:absolute;
width:160px;
left:104%; top: 68px; /*把文字定位在圖書右側(cè)*/
transform:rotate(-90deg); /*旋轉(zhuǎn)文字需要使用帶廠商前綴的屬性*/
transform-origin:left bottom; /*設(shè)定旋轉(zhuǎn)中心點(diǎn)，需要帶廠商前綴的屬性*/
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; /*相對(duì)于包含圖片的內(nèi)部div*/
z-index:2;
width:200px; /*彈出層寬度*/
background:#fff;
padding:10px 2px 5px; /*彈出層內(nèi)容邊距*/
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; }/*鼠標(biāo)懸停于封面時(shí)顯示彈出層*/
#book_area article aside li {
padding:.25em 0 .75em 1em; /*列表項(xiàng)的垂直間距和左邊距*/
list-style-type:none; /*去掉默認(rèn)的項(xiàng)目符號(hào)*/
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 { /*懸停時(shí)突顯鏈接*/
color:#333;
} /*彈出層共享樣式結(jié)束*/
#book_area article.left aside {/*左側(cè)兩本書*/
left:84%; top:14px; /* 把彈出層定位在圖片右側(cè)*/
}
#book_area article.right aside {/*右側(cè)兩本書*/
right:84%; top:14px;/*把彈出層定位在圖片左側(cè)*/
}
#book_area article aside:after { /*橙色三角形*/
content:""; /*需要有內(nèi)容，這里是一個(gè)空字符串*/
position:absolute; /*相對(duì)于彈出層定位*/
top:33px;
border:12px solid;
height:0px; width:0px; /*收縮邊框創(chuàng)造三角形*/
}
#book_area article.left aside:after { /*左側(cè)圖書彈出層的三角形定位及顏色*/
right:100%;
border-color:transparent #f58c21 transparent transparent;
}
#book_area article.right aside:after { /*右側(cè)圖書彈出層的三角形定位及顏色*/
left:100%;
border-color:transparent transparent transparent #f58c21;
}
#book_area article aside:before { /*白色三角形*/
content:""; /*需要有內(nèi)容，這里是一個(gè)空字符串*/
position:absolute; /*相對(duì)于彈出層定位*/
border:8px solid;
height:0px; width:0px; /*收縮邊框創(chuàng)造三角形*/
z-index:100; /*保證白色三角形在最前面*/
top:37px;
}
#book_area article.left aside:before { /*左側(cè)圖書白色三角形的樣式、位置和顏色*/
right:100%;
border-color:transparent white transparent transparent;
}
#book_area article.right aside:before { /*右側(cè)圖書白色三角形的樣式、位置和顏色*/
left:100%;
border-color:transparent transparent transparent white;
}
/* footer */
footer {
padding:.5em 0 .35em 0; /*內(nèi)容上下的間距*/
text-align:center; /*居中內(nèi)容*/
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; /*去掉默認(rèn)的項(xiàng)目符號(hào)*/
float:left; /*讓列表項(xiàng)水平排列*/
font-family:Times;
font-weight:400;
font-size:.85em;
}
footer li + li a {
border-left:1px solid #ccc; /*鏈接分隔線*/
}
footer li a {
text-decoration:none; /*去掉鏈接默認(rèn)的下劃線*/
color:#aaa;
padding:0 5px; /*鏈接間距*/
}
footer a:hover {
color:#777;
}
