如何使用CSS3進(jìn)行樣式效果增強(qiáng)

發(fā)布時(shí)間：2024-09-13 15:37:08 作者：貓本聰

本文介紹了使用CSS3實(shí)現(xiàn)各種樣式效果的方法,包括文字漸變、圓角、陰影、多重背景等,通過實(shí)例代碼,展示了如何簡(jiǎn)潔有效地增強(qiáng)網(wǎng)頁視覺效果,無需額外圖像或復(fù)雜腳本,適合前端開發(fā)者和設(shè)計(jì)師參考，感興趣的朋友跟隨小編一起看看吧

使用CSS3進(jìn)行增強(qiáng)

滑過文字漸變

/* 這段代碼實(shí)現(xiàn)了當(dāng)鼠標(biāo)滑過鏈接時(shí)的漸變效果 */
a {
	color: #007c21;
	transition: color .4s ease;
}
a:hover { color: #00bf32; }

為元素創(chuàng)建圓角

使用CSS3可以在不引入額外的標(biāo)記或圖像的情況下，為大多數(shù)元素(包括表單元素、圖像，甚至段落文本)創(chuàng)建圓角。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Rounded Corners</title>
	<link rel="stylesheet" href="css/rounded-corners.css" />
</head>
<body>
<div class="all-corners"></div>
<div class="one-corner"></div>
<div class="elliptical-corners"></div>
<div class="circle"></div>
</body>
</html>

使用CSS圓角的四個(gè)例子，包含了必要的廠商前綴以支持舊版的Android、Mobile Safari和Safari瀏覽器。對(duì)于.circle，使用75px與50%的效果是一樣的，因?yàn)樵撛氐拇笮?code>150像素*150像素。

div {
	background: #999;
	float: left;
	height: 150px;
	margin: 10px;
	width: 150px;
}
.all-corners {
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.one-corner {
	-webkit-border-top-left-radius: 75px;
	border-top-left-radius: 75px;
}
.elliptical-corners {
	-webkit-border-radius: 50px / 20px;
	border-radius: 50px / 20px;
}
.circle {
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

div {
	background: #ff9;
	border: 5px solid #326795;
	float: left;
	height: 150px;
	margin: 10px;
	width: 150px;
}
.example-1 {
	/* Makes the radius of the top-left and bottom-right corners 10px and 
	the top-right and bottom-left corners 20px */
	border-radius: 10px 20px;
}
.example-2 {
	/* Makes the radius of the top-left corner 20px, and all other corners 0 */
	border-radius: 20px 0 0;
}
.example-3 {
	/* Makes the radius of the top-left corner 10px, the top-right corner 20px, 
	the bottom-right corner 0, and the bottom-left corner 30px */
	border-radius: 10px 20px 0 30px;
}

為元素創(chuàng)建四個(gè)相同的圓角

這一步是可選的，輸入-webkit-border-radius: r，這里的r是圓角的半徑大小，表示為長(zhǎng)度(帶單位)。
輸入border-radius: r，這里的r是圓角的半徑大小，使用與第一步中相同的值。這是該屬性的標(biāo)準(zhǔn)短形式語法。

為元素創(chuàng)建一個(gè)圓角

這一步是可選的，輸入-webkit-border-top-left-radius: r，這里的r是左上方圓角的半徑大小，表示為長(zhǎng)度(帶單位)。
輸入border-top-left-radius: r，這里的r使用與第一步中相同的值。這是該屬性的標(biāo)準(zhǔn)長(zhǎng)形式語法。
創(chuàng)建右上方圓角使用top-right；創(chuàng)建右下方圓角使用bottom-right；創(chuàng)建左下方圓角使用bottom-left。

創(chuàng)建橢圓形圓角

這一步是可選的，輸入-webkit-border-radius: x/y，其中x是圓角在水平方向上的半徑大小，y是圓角在垂直方向上的半徑大小，均表示為長(zhǎng)度(帶單位)。
輸入border-radius: x/y，其中x和y跟第一步中的值相等。

使用border-radius(屬性不是繼承的)創(chuàng)建圖形

輸入-webkit-border-radius: r這里的r是元素的半徑大小(帶長(zhǎng)度單位)。要?jiǎng)?chuàng)建圓形，可以使用短形式的語法，r的值應(yīng)該等于元素高度或?qū)挾鹊囊话搿?/li>
輸入border-radius: r這里的r是元素的半徑大小(帶長(zhǎng)度單位)，跟第一步中的r相等。這是標(biāo)準(zhǔn)的無前綴語法。

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

為文本添加陰影

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

為元素的文本添加陰影

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

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

輸入text-shadow:。
分別輸入x-offset(水平偏移量)、y-offset(垂直偏移量)、blur-radius(模糊半徑)和color的值(前三個(gè)值帶長(zhǎng)度單位，四個(gè)值之間不用逗號(hào)分隔)。
blur-radius的值是可選的。
輸入,(逗號(hào))。
對(duì)四種屬性使用不同的值重復(fù)第二步。

<!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的效果。第一個(gè)、第二個(gè)和第五個(gè)都省略了模糊半徑的值。.multiple類告訴我們，可以為單個(gè)元素添加多個(gè)陰影樣式，每組屬性之間用逗號(hào)分隔。這樣，通過結(jié)合使用多個(gè)陰影樣式，可以創(chuàng)建出特殊而有趣的效果。

將text-shadow(屬性是繼承的)改回默認(rèn)值

即輸入text-shadow: none;，這個(gè)屬性不需要輸入使用廠商前綴。

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

為其他元素添加陰影

使用text-shadow屬性可以為元素的文本添加陰影，使用box-shadow屬性則可以為元素本身添加陰影。他們的基礎(chǔ)屬性集是相同的，不過box-shadow還允許使用使用兩個(gè)可選的屬性：inset關(guān)鍵字屬性和spread屬性(用于擴(kuò)張或收縮陰影)。

box-shadow屬性接受六個(gè)值：帶長(zhǎng)度單位的x-offset和y-offset、可選的帶長(zhǎng)度單位的blur-radius、可選的inset關(guān)鍵字、可選的帶長(zhǎng)度單位的spread值及color值。如果不指定blur-radius和spread的值，則設(shè)為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添加一個(gè)或多個(gè)陰影的效果。前五個(gè)類各自應(yīng)用了一個(gè)彼此不同的陰影樣式。最后一個(gè)類應(yīng)用了兩個(gè)陰影(還可以應(yīng)用更多個(gè)陰影)。不理解box-shadow的瀏覽器會(huì)直接忽略這些CSS樣式規(guī)則，呈現(xiàn)沒有陰影的頁面。

為元素添加陰影

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

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

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

為元素應(yīng)用多重陰影

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

將box-shadow(屬性是不繼承的)改回默認(rèn)值

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

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

應(yīng)用多重背景

多重背景幾乎可以應(yīng)用于任何元素。

<!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%;
}

為單個(gè)元素應(yīng)用多重背景圖像(不需要使用廠商前綴)

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

對(duì)于多重背景圖像，可以使用標(biāo)準(zhǔn)的短形式語法，即使用逗號(hào)分隔每組背景參數(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 it
to 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可以是十六進(jìn)制數(shù)、RGB值以及其他任何支持的顏色名稱，另外也可以使用圖像。最好不要將RGBA、HSL或HSLA值作為備用背景顏色(如果你不打算支持IE則不必在意)，因?yàn)镮E8及以前的版本不支持。

定義線性漸變

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

定義徑向漸變

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

指定顏色

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

為元素設(shè)置不透明度(opacity屬性不繼承)

使用opacity屬性可以修改元素的透明度。方法是輸入opacity: x,這里的x表示元素元素的不透明程度(兩位小數(shù)，不帶單位)。

opacity的默認(rèn)值為1(完全不透明)，范圍為0~1。

通過使用opacity屬性和:hover偽屬性，可以產(chǎn)生一些有趣且實(shí)用的效果。例如img { opacity: .75; }默認(rèn)情況下可以將圖片設(shè)置為75%的不透明度，img:hover { opacity: 1; }可導(dǎo)致用戶鼠標(biāo)停留在元素上時(shí)元素變?yōu)椴煌该?。在將縮略圖鏈接到全尺寸版本時(shí)經(jīng)?？吹竭@種效果。對(duì)于訪問者來說，懸浮可增強(qiáng)圖像的動(dòng)感。

opacity屬性與使用RGBA或HSLA設(shè)置的透明背景色是兩個(gè)容易混淆的概念。opacity影響的是整個(gè)元素(包括其內(nèi)容)，而background-color: rgba(128,0,64,.6);這樣的設(shè)置僅影響背景的透明度。

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

使用:before和:after偽元素可以很方便地為頁面添加一些令人難以置信的設(shè)計(jì)效果。它們可以與content屬性結(jié)合使用，從而創(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 &hellip; <a href="victoria.html" class="more">Read More</a></p>
...

/* The generated content */
.more:after {
    content: " ?";
}

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

使用sprite拼合圖像

瀏覽器中文本顯示速度很快，但是圖像往往會(huì)減慢頁面的加載速度。為解決這一問題，可以將多個(gè)圖像拼合成單個(gè)背景圖像(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應(yīng)用于任意數(shù)量的元素。在上面這個(gè)例子中，使用.icon:before來實(shí)現(xiàn)所需的效果。這樣sprite就是通過content: " ";生成的空格的背景圖像。將其設(shè)置為display: block;，從而就可以設(shè)置與圖標(biāo)大小匹配的高度和寬度。沒有這三個(gè)屬性，圖像將不會(huì)顯示。通過使用background-position，可以將正確的圖標(biāo)放入該位置。

到此這篇關(guān)于使用CSS3進(jìn)行樣式效果增強(qiáng)的文章就介紹到這了,更多相關(guān)CSS3樣式效果增強(qiáng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：CSS3 樣式效果增強(qiáng)

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片