使用CSS3进行样式效果增强_F11 - 专业站长和开发者的学习网站

使用CSS3进行增强

滑过文字渐变

/* 这段代码实现了当鼠标滑过链接时的渐变效果 */

a {

color: #007c21;

transition: color .4s ease;

}

a:hover { color: #00bf32; }

为元素创建圆角

使用CSS3可以在不引入额外的标记或图像的情况下，为大多数元素(包括表单元素、图像，甚至段落文本)创建圆角。

<!DOCTYPE html>

<head>

<title>Rounded Corners</title>

</head>

<body>

</body>

</html>

使用CSS圆角的四个例子，包含了必要的厂商前缀以支持旧版的Android、Mobile Safari和Safari浏览器。对于.circle，使用75px与50%的效果是一样的，因为该元素的大小为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;

}

为元素创建四个相同的圆角

这一步是可选的，输入-webkit-border-radius: r，这里的r是圆角的半径大小，表示为长度(带单位)。
输入border-radius: r，这里的r是圆角的半径大小，使用与第一步中相同的值。这是该属性的标准短形式语法。

为元素创建一个圆角

这一步是可选的，输入-webkit-border-top-left-radius: r，这里的r是左上方圆角的半径大小，表示为长度(带单位)。
输入border-top-left-radius: r，这里的r使用与第一步中相同的值。这是该属性的标准长形式语法。
创建右上方圆角使用top-right；创建右下方圆角使用bottom-right；创建左下方圆角使用bottom-left。

创建椭圆形圆角

这一步是可选的，输入-webkit-border-radius: x/y，其中x是圆角在水平方向上的半径大小，y是圆角在垂直方向上的半径大小，均表示为长度(带单位)。
输入border-radius: x/y，其中x和y跟第一步中的值相等。

使用border-radius(属性不是继承的)创建图形

输入-webkit-border-radius: r这里的r是元素的半径大小(带长度单位)。要创建圆形，可以使用短形式的语法，r的值应该等于元素高度或宽度的一半。
输入border-radius: r这里的r是元素的半径大小(带长度单位)，跟第一步中的r相等。这是标准的无前缀语法。

注：不支持border-radius的旧的浏览器仅会以方角呈现元素。border-radius仅影响施加该样式的元素的角，不会影响其子元素的角。因此如果一个子元素有背景，该背景就有可能显示在一个或多个父元素的角的位置，从而影响圆角样式。有时元素的背景(这里讲的不是子元素的背景)会透过其圆角。为了避免这种情况，可以在元素的border-radius声明后面增加一条样式规则：background-clip: padding-box;。

为文本添加阴影

使用text-shadow可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。

为元素的文本添加阴影

输入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>

<head>

<title>Text Shadow</title>

</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类告诉我们，可以为单个元素添加多个阴影样式，每组属性之间用逗号分隔。这样，通过结合使用多个阴影样式，可以创建出特殊而有趣的效果。

将text-shadow(属性是继承的)改回默认值

即输入text-shadow: none;，这个属性不需要输入使用厂商前缀。

text-shadow属性接受四个值：带长度单位的x-offset、带长度单位的y-offset、可选的带长度单位的blur-radius以及color值。如不指定blur-radius，将假定其值为0。x-offset和y-offset值可以是正整数也可以是负整数，也就是说1px和-1px都是有效的。blur-radius值必须是正整数。这三个值都可以为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>

<head>

<title>Box Shadow</title>

</head>

<body>

<p>Shadow with Blur</p>

</div>

<p>Shadow with Negative Offsets and Blur</p>

</div>

<p>Shadow with Blur and Spread</p>

</div>

<p>Shadow with Offsets Zero, Blur, and Spread</p>

</div>

<p>Inset Shadow</p>

</div>

<p>Multiple Shadows</p>

</div>

<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/sky.png);

background-position:

50% 102%,

100% -150px,

0 -150px,

50% 100%;

background-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样式规则，呈现没有阴影的页面。

为元素添加阴影

输入-webkit-box-shadow:。
分别输入表示x-offset、y-offset、blur-radius、spread和color的值(前四个值均带长度单位)，例如 2px 2px 5px #333。
输入box-shadow:，再重复第二步。

创建内阴影

输入-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关键字包含在内。
输入逗号。对每种属性使用不同的值重复第二步。
输入box-shadow:，再重复第二步至第四步。

将box-shadow(属性是不继承的)改回默认值

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

注：x-offset、y-offset和spread值可以是正整数，也可以是负整数。blur-radius值必须是正整数。这三个值都可以为零。inset关键字可以让阴影位于元素内部。

应用多重背景

多重背景几乎可以应用于任何元素。

<!DOCTYPE html>

<head>

<title>Multiple Backgrounds</title>

</head>

<body>

<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/sky.png);

background-position:

50% 102%,

100% -150px,

0 -150px,

50% 100%;

background-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对应一个值。

对于多重背景图像，可以使用标准的短形式语法，即使用逗号分隔每组背景参数。这种表示方法的好处是开发者既可以指定备用背景颜色，也可以为旧的浏览器指定图像。

.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>

<head>

<title>Gradient Backgrounds</title>

</head>

<body>

<div class="vertical-down"><p>default</p></div>

<div class="horizontal-rt"><p>to right</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="radial-center"><p>default</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>

<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

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 {