如何使用CSS3进行样式效果增强

清幽百合 發表於 2026-5-3 22:16:36

<h2>使用CSS3进行增强</h2>
<h3>滑过文字渐变</h3>
<div class="jb51code"><pre class="brush:css;">/* 这段代码实现了当鼠标滑过链接时的渐变效果 */
a {
color: #007c21;
transition: color .4s ease;
}
a:hover { color: #00bf32; }</pre></div>
<h3>为元素创建圆角</h3>
<p>&emsp;&emsp;使用CSS3可以在不引入额外的标记或图像的情况下，为大多数元素(包括表单元素、图像，甚至段落文本)创建圆角。</p>
<div class="jb51code"><pre class="brush:css;"><!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>
</pre></div>
<p>&emsp;&emsp;使用CSS圆角的四个例子，包含了必要的厂商前缀以支持旧版的Android、Mobile Safari和Safari浏览器。对于<code>.circle</code>，使用<code>75px</code>与<code>50%</code>的效果是一样的，因为该元素的大小为<code>150像素*150像素</code>。</p>
<div class="jb51code"><pre class="brush:css;">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%;
}</pre></div>
<div class="jb51code"><pre class="brush:css;">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;
}</pre></div>
<h3>为元素创建四个相同的圆角</h3>
<ul><li>这一步是可选的，输入<code>-webkit-border-radius: r</code>，这里的<code>r</code>是圆角的半径大小，表示为长度(带单位)。</li><li>输入<code>border-radius: r</code>，这里的<code>r</code>是圆角的半径大小，使用与第一步中相同的值。这是该属性的标准短形式语法。</li></ul>
<h3>为元素创建一个圆角</h3>
<ul><li>这一步是可选的，输入<code>-webkit-border-top-left-radius: r</code>，这里的<code>r</code>是左上方圆角的半径大小，表示为长度(带单位)。</li><li>输入<code>border-top-left-radius: r</code>，这里的<code>r</code>使用与第一步中相同的值。这是该属性的标准长形式语法。</li><li>创建右上方圆角使用<code>top-right</code>；创建右下方圆角使用<code>bottom-right</code>；创建左下方圆角使用<code>bottom-left</code>。</li></ul>
<h3>创建椭圆形圆角</h3>
<ul><li>这一步是可选的，输入<code>-webkit-border-radius: x/y</code>，其中<code>x</code>是圆角在水平方向上的半径大小，<code>y</code>是圆角在垂直方向上的半径大小，均表示为长度(带单位)。</li><li>输入<code>border-radius: x/y</code>，其中<code>x</code>和<code>y</code>跟第一步中的值相等。</li></ul>
<h3>使用border-radius(属性不是继承的)创建图形</h3>
<ul><li>输入<code>-webkit-border-radius: r</code>这里的<code>r</code>是元素的半径大小(带长度单位)。要创建圆形，可以使用短形式的语法，<code>r</code>的值应该等于元素高度或宽度的一半。</li><li>输入<code>border-radius: r</code>这里的r是元素的半径大小(带长度单位)，跟第一步中的<code>r</code>相等。这是标准的无前缀语法。</li></ul>
<p>&emsp;&emsp;注：不支持<code>border-radius</code>的旧的浏览器仅会以方角呈现元素。<code>border-radius</code>仅影响施加该样式的元素的角，不会影响其子元素的角。因此如果一个子元素有背景，该背景就有可能显示在一个或多个父元素的角的位置，从而影响圆角样式。有时元素的背景(这里讲的不是子元素的背景)会透过其圆角。为了避免这种情况，可以在元素的<code>border-radius</code>声明后面增加一条样式规则：<code>background-clip: padding-box;</code>。</p>
<h3>为文本添加阴影</h3>
<p>&emsp;&emsp;使用<code>text-shadow</code>可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。</p>
<h3>为元素的文本添加阴影</h3>
<ul><li>输入<code>text-shadow:</code>。</li><li>分别输入表示<code>x-offset</code>(水平偏移量)、<code>y-offset</code>(垂直偏移量)、<code>blur-radius</code>(模糊半径)和<code>color</code>的值(前三个值带长度单位，四个值之间不用逗号分隔)，例如 <code>-2px 3px 7px #999</code>。</li></ul>
<h3>为元素的文本添加多重阴影</h3>
<ul><li>输入<code>text-shadow:</code>。</li><li>分别输入<code>x-offset</code>(水平偏移量)、<code>y-offset</code>(垂直偏移量)、<code>blur-radius</code>(模糊半径)和<code>color</code>的值(前三个值带长度单位，四个值之间不用逗号分隔)。</li><li><code>blur-radius</code>的值是可选的。</li><li>输入,(逗号)。</li><li>对四种属性使用不同的值重复第二步。</li></ul>
<div class="jb51code"><pre class="brush:xhtml;"><!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></pre></div>
<div class="jb51code"><pre class="brush:css;">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);
}</pre></div>
<p>&emsp;&emsp;这些类演示了几种<code>text-shadow</code>的效果。第一个、第二个和第五个都省略了模糊半径的值。<code>.multiple</code>类告诉我们，可以为单个元素添加多个阴影样式，每组属性之间用逗号分隔。这样，通过结合使用多个阴影样式，可以创建出特殊而有趣的效果。</p>
<h3>将text-shadow(属性是继承的)改回默认值</h3>
<p>&emsp;&emsp;即输入<code>text-shadow: none;</code>，这个属性不需要输入使用厂商前缀。</p>
<p>&emsp;&emsp;<code>text-shadow</code>属性接受四个值：带长度单位的<code>x-offset</code>、带长度单位的<code>y-offset</code>、可选的带长度单位的<code>blur-radius</code>以及<code>color</code>值。如不指定<code>blur-radius</code>，将假定其值为0。<code>x-offset</code>和<code>y-offset</code>值可以是正整数也可以是负整数，也就是说<code>1px</code>和<code>-1px</code>都是有效的。<code>blur-radius</code>值必须是正整数。这三个值都可以为0。尽管<code>text-shadow</code>的语法与边框和背景属性的语法是类似的，但它不能像边框和背景那样单独的指定四个属性值。如果不指定<code>text-shadow</code>，它就会使用初始值<code>none</code>。</p>
<h3>为其他元素添加阴影</h3>
<p>&emsp;&emsp;使用<code>text-shadow</code>属性可以为元素的文本添加阴影，使用<code>box-shadow</code>属性则可以为元素本身添加阴影。他们的基础属性集是相同的，不过<code>box-shadow</code>还允许使用使用两个可选的属性：<code>inset</code>关键字属性和<code>spread</code>属性(用于扩张或收缩阴影)。</p>
<p>&emsp;&emsp;<code>box-shadow</code>属性接受六个值：带长度单位的<code>x-offset</code>和<code>y-offset</code>、可选的带长度单位的<code>blur-radius</code>、可选的<code>inset</code>关键字、可选的带长度单位的<code>spread</code>值及<code>color</code>值。如果不指定<code>blur-radius</code>和<code>spread</code>的值，则设为0。</p>
<div class="jb51code"><pre class="brush:xhtml;"><!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></pre></div>
<div class="jb51code"><pre class="brush:css;">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%;
}</pre></div>
<p>&emsp;&emsp;上面程序用于演示使用<code>box-shadow</code>添加一个或多个阴影的效果。前五个类各自应用了一个彼此不同的阴影样式。最后一个类应用了两个阴影(还可以应用更多个阴影)。不理解<code>box-shadow</code>的浏览器会直接忽略这些CSS样式规则，呈现没有阴影的页面。</p>
<h3>为元素添加阴影</h3>
<ul><li>输入<code>-webkit-box-shadow:</code>。</li><li>分别输入表示<code>x-offset</code>、<code>y-offset</code>、<code>blur-radius</code>、<code>spread</code>和<code>color</code>的值(前四个值均带长度单位)，例如 <code>2px</code> <code>2px</code> <code>5px</code> <code>#333</code>。</li><li>输入<code>box-shadow:</code>，再重复第二步。</li></ul>
<h3>创建内阴影</h3>
<ul><li>输入<code>-webkit-box-shadow:</code>。</li><li>分别输入表示表示<code>x-offset</code>、<code>y-offset</code>、<code>blur-radius</code>、<code>spread</code>和<code>color</code>的值(前四个值均带长度单位)，例如 <code>2px</code> <code>2px</code> <code>5px</code> <code>#333</code>。</li><li>在冒号后输入<code>inset</code>，再输入一个空格(也可以在第二步之前输入<code>inset</code>和一个空格)。</li><li>输入<code>box-shadow:</code>，再重复第二步和第三步。</li></ul>
<h3>为元素应用多重阴影</h3>
<ul><li>输入<code>-webkit-box-shadow:</code>。</li><li>分别输入表示表示<code>x-offset</code>、<code>y-offset</code>、<code>blur-radius</code>、<code>spread</code>和<code>color</code>的值(前四个值均带长度单位)，例如 <code>2px</code> <code>2px</code> <code>5px</code> <code>#333</code>。</li><li>如果有必要，将<code>inset</code>关键字包含在内。</li><li>输入逗号。对每种属性使用不同的值重复第二步。</li><li>输入<code>box-shadow:</code>，再重复第二步至第四步。</li></ul>
<h3>将box-shadow(属性是不继承的)改回默认值</h3>
<ul><li>输入<code>-webkit-box-shadow: none;</code>。</li><li>输入<code>box-shadow: none;</code>。</li></ul>
<p>注：<code>x-offset</code>、<code>y-offset</code>和<code>spread</code>值可以是正整数，也可以是负整数。<code>blur-radius</code>值必须是正整数。这三个值都可以为零。<code>inset</code>关键字可以让阴影位于元素内部。</p>
<h3>应用多重背景</h3>
<p>&emsp;&emsp;多重背景几乎可以应用于任何元素。</p>
<div class="jb51code"><pre class="brush:xhtml;"><!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></pre></div>
<div class="jb51code"><pre class="brush:css;">...
.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%;
}</pre></div>
<p>为单个元素应用多重背景图像(不需要使用厂商前缀)</p>
<ul><li>输入<code>background-color: b</code>，这里的b是希望为元素应用的备用背景颜色。</li><li>输入<code>background-image: u</code>，这里的<code>u</code>是绝对或相对路径引用的<code>url</code>列表(用逗号分隔。支持多重背景的浏览器，图像是分层次相互重叠在一起的，用逗号分隔的列表中的第一个图像位于顶部。)</li><li>输入<code>background-position: p</code>，这里的<code>p</code>是成对的<code>x-offset</code>和<code>y-offset</code>(可以是正的，也可以是负的；带长度单位或者关键字，如<code>center top</code>)的集合，用逗号分隔。对于第二步中指定的每个<code>url</code>，都应有一组<code>x-offset</code>和<code>y-offset</code>。</li><li>输入<code>background-repeat: r</code>，这里的<code>r</code>是<code>repeat-x</code>、<code>repeat-y</code>或<code>no-repeat</code>值，用逗号分隔，第二步中指定的每个<code>url</code>对应一个值。</li></ul>
<p>&emsp;&emsp;对于多重背景图像，可以使用标准的短形式语法，即使用逗号分隔每组背景参数。这种表示方法的好处是开发者既可以指定备用背景颜色，也可以为旧的浏览器指定图像。</p>
<div class="jb51code"><pre class="brush:css;">.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%;
}</pre></div>
<h3>使用渐变背景</h3>
<div class="jb51code"><pre class="brush:xhtml;"><!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></pre></div>
<div class="jb51code"><pre class="brush:css;">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);
}</pre></div>
<h3>创建备用背景颜色</h3>
<p>&emsp;&emsp;输入<code>background: color</code>或者<code>background-color: color</code>，这里的<code>color</code>可以是十六进制数、RGB值以及其他任何支持的颜色名称，另外也可以使用图像。最好不要将RGBA、HSL或HSLA值作为备用背景颜色(如果你不打算支持IE则不必在意)，因为IE8及以前的版本不支持。</p>
<h3>定义线性渐变</h3>
<ul><li>输入<code>background: linear-gradient(</code>。</li><li>如果希望渐变方向是从上向下(默认方向)，则可以跳过这一步。</li><li>输入方向后面加一个逗号，方向指<code>to top</code>、<code>to right</code>、<code>to bottom right</code>、<code>to top right</code>等这样的值。</li><li>或者输入方向后面加一个逗号，这里的方向指的是角度值(如<code>45deg</code>、<code>107deg</code>等)。根据后面讲到的“指定颜色”等，定义渐变颜色。</li><li>输入<code>);</code>完成渐变。</li></ul>
<h3>定义径向渐变</h3>
<ul><li>输入<code>background: radial-gradient(</code>。</li><li>指定渐变的形状。希望指定尺寸则可根据第三步中指定的尺寸自行确定。</li><li>否则输入<code>circle</code>或<code>ellipse</code>。</li><li>指定渐变的尺寸。</li><li>如果希望尺寸为自动指定的值(默认值为·farthest-corner·，最远的角)，则跳过这一步。</li><li>否则输入代表渐变宽度和高度的一个长度值(如<code>200px</code>或<code>7em</code>)或代表宽度和高度的一对值(<code>390px</code> <code>175px</code>或<code>60%</code> <code>85%</code>)。</li><li>注意，如果只使用一个值，则这个值不能是百分数。或者输入<code>closest-side</code>、<code>farthest-side</code>、<code>closest-corner</code>或<code>farthest-corner</code>。</li><li>这些关键字代表相对于渐变的中心，渐变可以伸展到多大的空间。</li><li>边界决定了渐变的尺寸。指定渐变的位置。希望渐变的位置从元素的中心开始(默认值)则可跳过这一步。</li><li>输入<code>at top</code>、<code>at right</code>、<code>at bottom left</code>、<code>at top right</code>等表示渐变中心位置的值。或者输入表示渐变中心位置的一对坐标，并以<code>at</code>开头，例如<code>at 200px 43px</code>、<code>at 30% 40%</code>、<code>at 50% -10px</code>等。定义渐变颜色。输入<code>);</code>完成渐变。</li></ul>
<h3>指定颜色</h3>
<ul><li>&emsp;&emsp;输入至少两种颜色，每种颜色之间用逗号分隔。</li><li>指定的第一个颜色出现在渐变的开始位置，最后一个出现的颜色出现在渐变的结束位置。</li><li>对于径向渐变，它们分别为最里边的颜色和最外边的颜色。</li></ul>
<h3>为元素设置不透明度(opacity属性不继承)</h3>
<p>&emsp;&emsp;使用<code>opacity</code>属性可以修改元素的透明度。方法是输入<code>opacity: x</code>,这里的<code>x</code>表示元素元素的不透明程度(两位小数，不带单位)。</p>
<p>&emsp;&emsp;<code>opacity</code>的默认值为1(完全不透明)，范围为<code>0~1</code>。</p>
<p>&emsp;&emsp;通过使用<code>opacity</code>属性和<code>:hover</code>伪属性，可以产生一些有趣且实用的效果。例如<code>img { opacity: .75; }</code>默认情况下可以将图片设置为75%的不透明度，<code>img:hover { opacity: 1; }</code>可导致用户鼠标停留在元素上时元素变为不透明。在将缩略图链接到全尺寸版本时经常看到这种效果。对于访问者来说，悬浮可增强图像的动感。</p>
<p>&emsp;&emsp;<code>opacity</code>属性与使用RGBA或HSLA设置的透明背景色是两个容易混淆的概念。<code>opacity</code>影响的是整个元素(包括其内容)，而<code>background-color: rgba(128,0,64,.6);</code>这样的设置仅影响背景的透明度。</p>
<h3>生成内容的效果</h3>
<p>&emsp;&emsp;使用<code>:before</code>和<code>:after</code>伪元素可以很方便地为页面添加一些令人难以置信的设计效果。它们可以与<code>content</code>属性结合使用，从而创建所谓的生成内容。生成内容指的是通过CSS创建的内容而不是HTML生成的。</p>
<div class="jb51code"><pre class="brush:plain;">...
<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>
...</pre></div>
<div class="jb51code"><pre class="brush:plain;">/* The generated content */
.more:after {
content: " »";
}</pre></div>
<p>&emsp;&emsp;通过上面代码，可以使带有<code>class="more"</code>的元素会在其后显示一个双箭头，以后如需变动，修改也只需要修改<code>.more</code>类即可，而不需要改动大量的HTML页面。</p>
<h3>使用sprite拼合图像</h3>
<p>&emsp;&emsp;浏览器中文本显示速度很快，但是图像往往会减慢页面的加载速度。为解决这一问题，可以将多个图像拼合成单个背景图像(<code>sprite</code>)，再通过CSS控制具体显示图像的哪一部分，使用的就是<code>background-position</code>属性。</p>
<div class="jb51code"><pre class="brush:plain;">.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:before {
background-position: -17px 0;
}
/* Shift position of sprite image for any document filename that ends with .docx */
a:before {
background-position: -34px 0;
}</pre></div>
<p>&emsp;&emsp;可以将<code>sprite</code>应用于任意数量的元素。在上面这个例子中，使用<code>.icon:before</code>来实现所需的效果。这样<code>sprite</code>就是通过<code>content: " ";</code>生成的空格的背景图像。将其设置为<code>display: block;</code>，从而就可以设置与图标大小匹配的高度和宽度。没有这三个属性，图像将不会显示。通过使用<code>background-position</code>，可以将正确的图标放入该位置。</p>

頁: [1]

琼殿技术论坛's Archiver

如何使用CSS3进行样式效果增强