组合使用 CSS3 属性

发布日期:2015-09-05 21:21:32
之前,我们主要学习了各种 CSS3 特性的一般用法。下面我们将组合这些特性来制作
THESE SHOULD HAVE WON>>这个超链接的效果。在 AND THE WINNER ISN’T 网站
的原始设计图中,该链接按钮的文字使用的是自定义字体,这点我们已经在第 5 章处理
过。除此之外,该链接按钮还有一个红色的渐变背景,使用了圆角效果并有一点阴影。
该超链接目前的样式如下:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
}
首先,针对老版本浏览器为其添加一个背景颜色。这样就算浏览器无法渲染渐变,它至
少也可以有一个红色的背景。此处我会刻意使用十六进制颜色值,因为如果老版本浏览
器不识别渐变的话,那它也不可能支持 RGB和 HSL颜色模式:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
}
接下来添加圆角效果。此处及后续章节中都请注意,我在代码示例中添加的所有 CSS3
属性,一般都需要设定浏览器私有前缀,为简洁起见我在此处省略了前缀:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
}
接下来,将文字颜色改为白色(再强调一次,我想确保在老版本浏览器中也看到同样效
果,所以此处使用了简单但兼容的颜色定义) ,然后设置一定的内边距(也可以使用百分
比值)以便让文字四边都有一定的间距:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
padding: 30px;
}
至此效果如下:
此时, 添加内边距导致链接上方的文字被盖住了, 所以我们给其追加一个 float: left ,
同时设置背景渐变:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计