前端學習筆記10 使用CSS3進行樣式效果增強

??注：不支持border-radius的舊的瀏覽器僅會以方角呈現(xiàn)元素。border-radius僅影響施加該樣式的元素的角，不會影響其子元素的角。因此如果一個子元素有背景，該背景就有可能顯示在一個或多個父元素的角的位置，從而影響圓角樣式。有時元素的背景（這里講的不是子元素的背景）會透過其圓角。為了避免這種情況，可以在元素的border-radius聲明后面增加一條樣式規(guī)則：background-clip: padding-box;。

為文本添加陰影

??使用text-shadow可以在不使用圖像表示文本的情況下，為段落、標題等元素中的文本添加動態(tài)的陰影效果。

為元素的文本添加陰影

輸入text-shadow:。分別輸入表示x-offset（水平偏移量）、y-offset（垂直偏移量）、blur-radius（模糊半徑）和color的值（前三個值帶長度單位，四個值之間不用逗號分隔），例如 -2px 3px 7px #999。

為元素的文本添加多重陰影

輸入text-shadow:。分別輸入x-offset（水平偏移量）、y-offset（垂直偏移量）、blur-radius（模糊半徑）和color的值（前三個值帶長度單位，四個值之間不用逗號分隔）。blur-radius的值是可選的。輸入,（逗號）。對四種屬性使用不同的值重復第二步。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Text Shadow</title> <link rel="stylesheet" href="css/text-shadow.css" /></head><body><p class="basic">Basic Shadow</p><p class="basic-negative">Basic Shadow</p><p class="blur">Blur Radius</p><p class="blur-inversed">Blur Radius</p><p class="multiple">Multiple Text Shadows</p></body></html>body { background: #fff; color: #222; font: 100%/1.05 helvetica, sans-serif; padding-top: 20px;}p { color: #222; /* nearly black */ font-size: 4.5em; font-weight: bold; margin: 0 0 45px;}p:last-child { margin: 0;}.basic { text-shadow: 3px 3px #aaa;}/* uses negative offsets--you can mix positive and negative ones, too. */.basic-negative { text-shadow: -4px -2px #ccc; /* a little lighter grey than #aaa */}.blur { text-shadow: 2px 2px 10px grey;}.blur-inversed { color: white; text-shadow: 2px 2px 10px #000; /* black */}/* this example has two shadows, but you can include more by separating each with a comma */.multiple { text-shadow: 2px 2px white, 6px 6px rgba(50,50,50,.25);}

??這些類演示了幾種text-shadow的效果。第一個、第二個和第五個都省略了模糊半徑的值。.multiple類告訴我們，可以為單個元素添加多個陰影樣式，每組屬性之間用逗號分隔。這樣，通過結合使用多個陰影樣式，可以創(chuàng)建出特殊而有趣的效果。

將text-shadow（屬性是繼承的）改回默認值 ??即輸入text-shadow: none;，這個屬性不需要輸入使用廠商前綴。

??text-shadow屬性接受四個值：帶長度單位的x-offset、帶長度單位的y-offset、可選的帶長度單位的blur-radius以及color值。如不指定blur-radius，將假定其值為0。x-offset和y-offset值可以是正整數(shù)也可以是負整數(shù)，也就是說1px和-1px都是有效的。blur-radius值必須是正整數(shù)。這三個值都可以為0。盡管text-shadow的語法與邊框和背景屬性的語法是類似的，但它不能像邊框和背景那樣單獨的指定四個屬性值。如果不指定text-shadow，它就會使用初始值none。

為其他元素添加陰影 ??使用text-shadow屬性可以為元素的文本添加陰影，使用box-shadow屬性則可以為元素本身添加陰影。他們的基礎屬性集是相同的，不過box-shadow還允許使用使用兩個可選的屬性：inset關鍵字屬性和sPRead屬性（用于擴張或收縮陰影）。 ??box-shadow屬性接受六個值：帶長度單位的x-offset和y-offset、可選的帶長度單位的blur-radius、可選的inset關鍵字、可選的帶長度單位的spread值及color值。如果不指定blur-radius和spread的值，則設為0。

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Box Shadow</title> <link rel="stylesheet" href="css/box-shadow.css" /></head><body><div class="shadow"> <p>Shadow with Blur</p></div><div class="shadow-negative"> <p>Shadow with Negative Offsets and Blur</p></div><div class="shadow-spread"> <p>Shadow with Blur and Spread</p></div><div class="shadow-offsets-0"> <p>Shadow with Offsets Zero, Blur, and Spread</p></div><div class="inset-shadow"> <p>Inset Shadow</p></div><div class="multiple"> <p>Multiple Shadows</p></div><div class="shadow-negative-spread"> <p>Shadow with Blur and Negative Spread</p></div></body></html>body { background: #000; color: #fff;}h1 { font-family: sans-serif; font-size: 2.25em; line-height: 1.1; text-align: center;}/* NOTE: The background-image URLs are different below than in the example shown in the book, because I've placed the images in a sub-folder (called "img"), as is typical when organizing a site. Also, I thought it would be helpful for you to see how to construct your background-image URLs under these circumstances. Note that the URLs are relative to where the style sheet lives, NOT the HTML page that is displaying the image. */.night-sky { background-color: navy; /* fallback color */ background-image: url(../img/ufo.png), url(../img/stars.png), url(../img/stars.png), url(../img/sky.png); background-position: 50% 102%, 100% -150px, 0 -150px, 50% 100%; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; height: 300px; margin: 25px auto 0; /* slightly different than book */ padding-top: 36px; width: 75%;}

??上面程序用于演示使用box-shadow添加一個或多個陰影的效果。前五個類各自應用了一個彼此不同的陰影樣式。最后一個類應用了兩個陰影（還可以應用更多個陰影）。不理解box-shadow的瀏覽器會直接忽略這些CSS樣式規(guī)則，呈現(xiàn)沒有陰影的頁面。

為元素添加陰影

輸入-webkit-box-shadow:。分別輸入表示x-offset、y-offset、blur-radius、spread和color的值（前四個值均帶長度單位），例如 2px 2px 5px #333。輸入box-shadow:，再重復第二步。

創(chuàng)建內(nèi)陰影

輸入-webkit-box-shadow:。分別輸入表示表示x-offset、y-offset、blur-radius、spread和color的值（前四個值均帶長度單位），例如 2px 2px 5px #333。在冒號后輸入inset，再輸入一個空格（也可以在第二步之前輸入inset和一個空格）。輸入box-shadow:，再重復第二步和第三步。

為元素應用多重陰影

輸入-webkit-box-shadow:。分別輸入表示表示x-offset、y-offset、blur-radius、spread和color的值（前四個值均帶長度單位），例如 2px 2px 5px #333。如果有必要，將inset關鍵字包含在內(nèi)。輸入逗號。對每種屬性使用不同的值重復第二步。輸入box-shadow:，再重復第二步至第四步。

將box-shadow（屬性是不繼承的）改回默認值

輸入-webkit-box-shadow: none;。輸入box-shadow: none;。

注：x-offset、y-offset和spread值可以是正整數(shù)，也可以是負整數(shù)。blur-radius值必須是正整數(shù)。這三個值都可以為零。inset關鍵字可以讓陰影位于元素內(nèi)部。

應用多重背景

??多重背景幾乎可以應用于任何元素。

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Multiple Backgrounds</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /></head><body><div class="night-sky"> <h1>In the night sky...</h1></div></body></html>....night-sky { background-color: navy; /* fallback color */ background-image: url(../img/ufo.png), url(../img/stars.png), url(../img/stars.png), url(../img/sky.png); background-position: 50% 102%, 100% -150px, 0 -150px, 50% 100%; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; height: 300px; margin: 25px auto 0; /* slightly different than book */ padding-top: 36px; width: 75%;}

為單個元素應用多重背景圖像（不需要使用廠商前綴）

輸入background-color: b，這里的b是希望為元素應用的備用背景顏色。輸入background-image: u，這里的u是絕對或相對路徑引用的url列表（用逗號分隔。支持多重背景的瀏覽器，圖像是分層次相互重疊在一起的，用逗號分隔的列表中的第一個圖像位于頂部。）輸入background-position: p，這里的p是成對的x-offset和y-offset（可以是正的，也可以是負的；帶長度單位或者關鍵字，如center top）的集合，用逗號分隔。對于第二步中指定的每個url，都應有一組x-offset和y-offset。輸入background-repeat: r，這里的r是repeat-x、repeat-y或no-repeat值，用逗號分隔，第二步中指定的每個url對應一個值。

??對于多重背景圖像，可以使用標準的短形式語法，即使用逗號分隔每組背景參數(shù)。這種表示方法的好處是開發(fā)者既可以指定備用背景顏色，也可以為舊的瀏覽器指定圖像。

.night-sky { /* fallback with both a color and image */ background: navy url(../img/ufo.png) no-repeat center bottom; /* for supporting browsers */ background: url(../img/ufo.png) no-repeat 50% 102%, url(../img/stars.png) no-repeat 100% -150px, url(../img/stars.png) no-repeat 0 -150px, url(../img/sky.png) repeat-x 50% 100%; height: 300px; margin: 25px auto 0; padding-top: 36px; width: 75%;}

使用漸變背景

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Gradient Backgrounds</title> <link rel="stylesheet" href="css/gradients.css" /></head><body><div class="vertical-down"><p>default</p></div><div class="vertical-up"><p>to top</p></div><div class="horizontal-rt"><p>to right</p></div><div class="horizontal-lt"><p>to left</p></div><div class="angle-bot-rt"><p>to <br />bottom right</p></div><div class="angle-bot-lt"><p>to <br />bottom left</p></div><div class="angle-top-rt"><p>to top right</p></div><div class="angle-top-lt"><p>to top left</p></div><div class="angle-120deg"><p>120deg</p></div><div class="angle-290deg"><p>290deg</p></div><section class="radial"> <div class="radial-center"><p>default</p></div> <div class="radial-top"><p>at top</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% at <br />bottom left</p></div> <div class="radial-various-1"><p>various 1</p></div> <div class="radial-various-2"><p>various 2</p></div></section><section class="color-stops"> <div class="color-stops-1"><p>yellow 10%, green</p></div> <div class="color-stops-2"><p>to top right, yellow, <br>green 70%, <br>blue</p></div></section></body></html>body { padding: 1.25em; /* 20px/16px, so 20px on each side */ font-size: 100%;}div { float: left; height: 150px; margin: 10px; width: 150px;}p { color: #fff; font: bold 1.25em/1 sans-serif; /* 20px/16px */ padding-top: 1.65em; /* 33px/16px */ text-align: center;}/* NOTE: The gradients below are in the standard CSS3 syntax. The browsers that support them are Chrome 26+, Firefox 16+, IE 10+, and Opera 12.10+. See gradients-with-browser-prefixes.css for the same gradient effects, but with the vendor prefix code also included so the gradients will work on several older browsers.A background with a "fallback" comment is the color that will show in browsers that don't support the gradient syntax. You can use a backgroundimage as a fallback as well (either on its own or in combination with a color).For example, background: red url(gradient-image.jpg) no-repeat;. *//* LINEAR GRADIENTS------------------------------------------ *//* :::: Vertical :::: */.vertical-down { background: silver; /* fallback */ /* default gradient, so you don't need to specify "to bottom" before the colors */ background: linear-gradient(silver, black);}.vertical-up { background: silver; background: linear-gradient(to top, silver, black);}/* :::: Horizontal :::: */.horizontal-rt { background: silver; /* fallback */ background: linear-gradient(to right, silver, black);}.horizontal-lt { background: silver; /* fallback */ background: linear-gradient(to left, silver, black);}/* :::: Diagonal Angles :::: *//* Note: The figures on page 377 show aqua as the fallback color, but I've switched itto navy below because the white text will be easier to read on a navy background. */.angle-bot-rt { background: navy; /* fallback */ background: linear-gradient(to bottom right, aqua, navy);}.angle-bot-lt { background: navy; /* fallback */ background: linear-gradient(to bottom left, aqua, navy);}.angle-top-rt { background: navy; /* fallback */ background: linear-gradient(to top right, aqua, navy);}.angle-top-lt { background: navy; /* fallback */ background: linear-gradient(to top left, aqua, navy);}/* :::: Angles via Degrees :::: */.angle-120deg { background: navy; /* fallback */ background: linear-gradient(120deg, aqua, navy);}.angle-290deg { background: navy; /* fallback */ background: linear-gradient(290deg, aqua, navy);}/* RADIAL GRADIENTS------------------------------------------ *//* :::: Radial :::: */.radial p { text-shadow: 0 0 3px #000;}.radial-center { background: red; /* fallback */ background: radial-gradient(yellow, red); /* default */}.radial-top { background: red; /* fallback */ background: radial-gradient(at top, yellow, red);}.radial-size-1 { background: red; /* fallback */ background: radial-gradient(100px 50px, yellow, red);}.radial-size-2 { background: red; /* fallback */ background: radial-gradient(70% 90% at bottom left, yellow, red);}.radial-various-1 { background: red; /* fallback */ background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);}.radial-various-2 { background: red; /* fallback */ background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red);}/* LINEAR GRADIENTS WITH COLOR STOPS------------------------------------------ */.color-stops div { margin-bottom: 30px;}.color-stops p { padding-top: 25px; text-shadow: 0 0 3px #000;}.color-stops-2 p { font-size: 18px; line-height: 1.05;}.color-stops-1 { background: green; /* fallback */ background: linear-gradient(yellow 10%, green);}.color-stops-2 { background: green; /* fallback */ background: linear-gradient(to top right, yellow, green 70%, blue);}

創(chuàng)建備用背景顏色

??輸入background: color或者background-color: color，這里的color可以是十六進制數(shù)、RGB值以及其他任何支持的顏色名稱，另外也可以使用圖像。最好不要將RGBA、HSL或HSLA值作為備用背景顏色（如果你不打算支持IE則不必在意），因為IE8及以前的版本不支持。

定義線性漸變

輸入background: linear-gradient(。如果希望漸變方向是從上向下（默認方向），則可以跳過這一步。輸入方向后面加一個逗號，方向指to top、to right、to bottom right、to top right等這樣的值。或者輸入方向后面加一個逗號，這里的方向指的是角度值（如45deg、107deg等）。根據(jù)后面講到的“指定顏色”等，定義漸變顏色。輸入);完成漸變。

定義徑向漸變

輸入background: radial-gradient(。指定漸變的形狀。希望指定尺寸則可根據(jù)第三步中指定的尺寸自行確定。否則輸入circle或ellipse。指定漸變的尺寸。如果希望尺寸為自動指定的值（默認值為·farthest-corner·，最遠的角），則跳過這一步。否則輸入代表漸變寬度和高度的一個長度值（如200px或7em）或代表寬度和高度的一對值（390px 175px或60% 85%）。注意，如果只使用一個值，則這個值不能是百分數(shù)。或者輸入closest-side、farthest-side、closest-corner或farthest-corner。這些關鍵字代表相對于漸變的中心，漸變可以伸展到多大的空間。邊界決定了漸變的尺寸。指定漸變的位置。希望漸變的位置從元素的中心開始（默認值）則可跳過這一步。輸入at top、at right、at bottom left、at top right等表示漸變中心位置的值。或者輸入表示漸變中心位置的一對坐標，并以at開頭，例如at 200px 43px、at 30% 40%、at 50% -10px等。定義漸變顏色。輸入);完成漸變。

指定顏色 ??輸入至少兩種顏色，每種顏色之間用逗號分隔。指定的第一個顏色出現(xiàn)在漸變的開始位置，最后一個出現(xiàn)的顏色出現(xiàn)在漸變的結束位置。對于徑向漸變，它們分別為最里邊的顏色和最外邊的顏色。

為元素設置不透明度（opacity屬性不繼承）

??使用opacity屬性可以修改元素的透明度。方法是輸入opacity: x,這里的x表示元素元素的不透明程度（兩位小數(shù)，不帶單位）。 ??opacity的默認值為1（完全不透明），范圍為0~1。 ??通過使用opacity屬性和:hover偽屬性，可以產(chǎn)生一些有趣且實用的效果。例如img { opacity: .75; }默認情況下可以將圖片設置為75%的不透明度，img:hover { opacity: 1; }可導致用戶鼠標停留在元素上時元素變?yōu)椴煌该鳌Ｔ趯⒖s略圖鏈接到全尺寸版本時經(jīng)常看到這種效果。對于訪問者來說，懸浮可增強圖像的動感。 ??opacity屬性與使用RGBA或HSLA設置的透明背景色是兩個容易混淆的概念。opacity影響的是整個元素（包括其內(nèi)容），而background-color: rgba(128,0,64,.6);這樣的設置僅影響背景的透明度。

生成內(nèi)容的效果

??使用:before和:after偽元素可以很方便地為頁面添加一些令人難以置信的設計效果。它們可以與content屬性結合使用，從而創(chuàng)建所謂的生成內(nèi)容。生成內(nèi)容指的是通過CSS創(chuàng)建的內(nèi)容而不是HTML生成的。

...<p>This area is one of the most tranquil spaces at the Villa. As I wandered around, enjoying shade provided by sycamore and laurel trees and serenaded by splashing water from two sculptural fountains, I couldn't help but think … <a href="victoria.html" class="more">Read More</a></p>.../* The generated content */.more:after { content: " ?";}

??通過上面代碼，可以使帶有class="more"的元素會在其后顯示一個雙箭頭，以后如需變動，修改也只需要修改.more類即可，而不需要改動大量的HTML頁面。

使用sprite拼合圖像

??瀏覽器中文本顯示速度很快，但是圖像往往會減慢頁面的加載速度。為解決這一問題，可以將多個圖像拼合成單個背景圖像（sprite），再通過CSS控制具體顯示圖像的哪一部分，使用的就是background-position屬性。

.documents li { margin-top: .45em;}/* Each link in the HTML has this class */.icon { display: inline-block; line-height: 1.1; font-size: .875em; min-height: 16px; /* set to height of icon so it isn't cut off at all */ padding-left: 23px; padding-top: 2px; /* allows positioning the icon absolutely relative to elements with class="icon" in the HTML */ position: relative;}.icon:before { background-image: url(../img/sprite.png); content: " "; display: block; height: 16px; /* icon height */ left: 0; /* default. change this if want the icon to appear in different spot */ position: absolute; width: 16px; /* icon width */ top: 0; /* default. change this if want the icon to appear in different spot */}/* Shift position of sprite image for any document filename that ends with .xls */a[href$=".xls"]:before { background-position: -17px 0;}/* Shift position of sprite image for any document filename that ends with .docx */a[href$=".docx"]:before { background-position: -34px 0;}

??可以將sprite應用于任意數(shù)量的元素。在上面這個例子中，使用.icon:before來實現(xiàn)所需的效果。這樣sprite就是通過content: " ";生成的空格的背景圖像。將其設置為display: block;，從而就可以設置與圖標大小匹配的高度和寬度。沒有這三個屬性，圖像將不會顯示。通過使用background-position，可以將正確的圖標放入該位置。

HTML and CSS 讀書筆記

本文為本人原創(chuàng)，采用知識共享 “署名-非商業(yè)性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協(xié)議進行許可。本作品可自由復制、傳播及基于本作品進行演繹創(chuàng)作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名 [ 丁學文.Blog ] 、原文鏈接及許可協(xié)議信息，并明確指出修改（如有），不得用于商業(yè)用途。謝謝合作。詳情請點擊查看許可協(xié)議及版權聲明具體內(nèi)容。

博主聯(lián)系方式： E-mail： xuewending1995@Gmail.com [ 請注明來意 ] GitHub： Levi.GitHub

上一篇：省份，城市，縣，鎮(zhèn)四級select級聯(lián)

下一篇：NPM更新