PDF《免图片, 用CSS3 实作精美效果》

免图片, 用CSS3 实作精美效果 CSS 演进到了目前的第

3 版, 加上了许多新的特效属性及动态效果, 以往 要靠程式才能呈现的效果, 现在只要单纯的 CSS 样式就可以完成.

本节将介绍几个重要, 而且实用的 CSS3 新功能, 如:圆角效果(border- radius)、 文字阴影(text-shadow)...等. * 圆角效果 border-radius 以往在网页中要制作出圆角效果, 在早期必须藉助圆角及透明背景的美工图 形才能做到.后期有部份浏览器开始支援了圆角的 CSS 属性, 但一直到 CSS3 才被正式纳入规格, 并且所有主流的浏览器都予以支援, 圆角终於成为了通用的 CSS 属性 . 圆角效果的语法如下 : border-radius : 圆角的值 这个语法建立的外框,

4 个角的圆角值皆相同.若希望

4 个角的圆角值各不 相同, 那麽可以针对

4 个角各别指定: border-top-left-radius:设定左上角的圆角值 border-top-right-radius:设定右上角的圆角值 border-bottom-right-radius:设定右下角的圆角值 border-bottom-left-radius:设定左下角的圆角值 我们来看下面这个例, 例中会示一次指定及各别指定圆角的外框 : ?ex16-08.html 圆角效果 body{ background-color:#aaaa00;

} h1{ text-align:center;

border:2px solid black;

} .all{ border-radius:10px;

一次指定4个圆角 } .top{ border-top-left-radius:10px;

只有指定左上的圆角 border-top-right-radius:10px;

只有指定右上的圆角 } .bottom{ border-bottom-right-radius:10px;

只有指定右下的圆角 border-bottom-left-radius:10px;

只有指定左下的圆角 } 一次指定的圆角的效果 分别指定上方圆角的效果 分别指定下方圆角的效果 一次指定圆角的效果 各别指定圆角的效果 圆角的值除了以像素 (px) 为单位来指定, 也可以使用 % 为单位指定 . 下面 为您介绍一个有趣的应用, 当正方形区块的

4 个角, 皆指定 50% 的圆角值, 就 会变成圆形的外框, 我们来看下面这个例子 : ?ex16-09.html 圆角效果 body{ background-color:#EE7700;

} .text{ width:356px;

height:356px;

line-height:390px;

text-align:center;

font-size:300px;

border:20px solid black;

设定黑色的外框线 border-radius:50%;

4 个圆角值皆为 50% } .pic{ width:376px;

height:376px;

over?ow:hidden;

设定若图像超出区块则隐藏起来 border-radius:50%;

个圆角值皆为 50% } 龟 由於是正方形, 所以区块的长宽要相等 由於是正方形, 所以区块的长宽要相等 * 文字阴影效果 text-shadow CSS3 新增了文字阴影的属性, 藉由这个属性, 我们可以很容易的创造出特 效文字, 再也不必像过去一样, 必须依靠美工图案才能达成相同的效果. text-shadow 的属性值, 和上一节介绍的 box-shadow 相同, 其语法如下 : text-shadow:X轴偏移值 Y轴偏移值 模糊系数 阴影颜色;

我们直接来看例 : ?ex16-10.html 文字阴影效果 h1{ font-family:标楷体;

font-weight:bold;

形成圆形外框的效果 形成圆形图片框的效果 text-align:center;

text-shadow:10px 10px 6px #333333;

} 有阴影的标题文字 文字加上阴影效果后, 虽然视觉上变得更有立体感, 但建议您还是不要滥用, 尤其是内文有大量文字的部份, 加上了阴影只会显得杂乱, 而且严重干扰阅读, 对於使用者的体验会有扣分的影响. 比较适合的情况是套用在文章或区块的标题 上, 不仅可以突显出标题文字, 也能间接地让文章的段落更加分明. 文字的阴影效果