CSS3系列教程：简介；圆角、边框半径和圆角；边框颜色；阴影

CSS3系列教程：简介

 

CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了……

 

注意：浏览器需要改进

尽管把玩CSS3是很有趣的事情——就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容方法。

 

CSS3的浏览器支持状况：

  • Firefox(3.05+…部分支持)
  • Google Chrome(1.0.154+…部分支持)
  • Google Chrome(2.0.156+…较好支持)
  • Internet Explorer(IE7, IE8 不支持)
  • Opera(9.6+…很少支持)
  • Safari(3.2.1+ windows…较好支持)

什么是CSS，什么是CSS3？

非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。CSS3只是表示下一代CSS，3只是版本号。

如果CSS3还没有完全被支持，那么我为什么要写CSS3呢？

因为学习新东西时间很有趣的事情！

而且有人常常问我如何实现圆角。我解释了很多遍如何使用图片或CSS3实现，这里我通过写一些我学到的一些东西的方式来希望能够帮助其他的有需要的人。

页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。

 

CSS3系列教程：边框半径和圆角

 

跨浏览器兼容性

就像在上一篇《CSS3系列教程：简介》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。

 

前缀：

-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

 

CSS3圆角（所有的）

不使用图片来实现圆角曾经是很流行的能力，创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用几行代码来创建圆角。

这是一个5px普通边框和15px边框半径的设置：

 

#roundCorderC{

      font-family: Arial;

      border: 5px solid #dedede;

      -moz-border-radius: 15px;

      -webkit-border-radius: 15px;

      padding: 15px 25px;

      height: inherit;

      width: 590px;

      }

 

浏览器支持:

  • Firefox(3.05+…)
  • Google Chrome(1.0.154+…)
  • Google Chrome(2.0.156+…)
  • Internet Explorer(IE7, IE8)
  • Opera 9.6
  • Safari(3.2.1+ windows)

CSS3圆角(个别的)

当然，一个DIV的四个角不需要全部都是圆角，你可以个别的实现圆角。

#roundCornerI{

 font-family: Arial;

 border: 5px solid #dedede;

 -moz-border-radius-topleft: 15px;

 -moz-border-radius-topright: 0px;

 -moz-border-radius-bottomright: 15px;

 -moz-border-radius-bottomleft: 0px;

 -webkit-border-top-left-radius: 15px;

 -webkit-border-top-right-radius: 0px;

 -webkit-border-bottom-left-radius: 0px;

 -webkit-border-bottom-right-radius: 15px;

 padding: 15x 25px;

 height: inherit;

 width: 590px;

}

 

浏览器支持:

  • Firefox(3.05+…)
  • Google Chrome(1.0.154+…)
  • Google Chrome(2.0.156+…)
  • Internet Explorer(IE7, IE8)
  • Opera 9.6
  • Safari(3.2.1+ windows)

 

CSS3系列教程：边框颜色

 

现在我们来看一看如何为边框的border-color添加更多的色彩。

使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。

浏览器兼容性

目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。

所有本系列关于CSS3的文章都会及时更新，以跟踪浏览器的兼容性。

CSS3中的边框颜色

这里是一个10px宽的标准边框和边框颜色：

#borderColor {

 border: 10px solid #dedede;

 -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;

 -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;

 -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;

 -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;

 padding: 15px 25px;

 height: inherit;

 width: 590px;

}

浏览器支持：

  • FireFox (3.0.5)
  • Google Chrome (1.0.154+)
  • Google Chrome (2.0.156+)
  • Internet Explorer (IE7/IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

有圆角的边框颜色

#borderColorCorner {

 border: 10px solid #dedede;

 -moz-border-radius: 15px;

 -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;

 -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;

 -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;

 -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;

 padding: 15px 25px;

 height: inherit;

 width: 590px;

}

浏览器支持：

  • FireFox (3.0.5)
  • Google Chrome (1.0.154+)
  • Google Chrome (2.0.156+)
  • Internet Explorer (IE7/IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

CSS3系列教程：阴影

 

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。

一般可以分为box-shadow和textshadow两类。

CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色

了解了这些，我们就可以以下面的方法开始体验了…

浏览器兼容性：

在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。

1

2

3

4

5

6

7

8

#boxShadow{

 border: 5px solid #111;

 -webkit-box-shadow: 5px 5px 7px #999;

 -webkit-border-bottom-right-radius: 15px;

 padding: 15px 25px;

 height: inherit;

 width: 590px;

}

这种效果同样可以用于图片…

浏览器支持：

  • FireFox (3.0.5) – [FireFox (3.1 PreAlpha) 兼容]
  • Google Chrome (1.0.154.)
  • Google Chrome (2.0.156.)(支持不是太好)
  • Internet Explorer (IE7/ IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

简单文字阴影：

1

2

3

4

5

6

.textShadowSingle {

 font-size: 3.2em;

 color: #F5F5F5;

 text-shadow: 3px 3px 7px #111;

 text-align: center;

}

浏览器支持：

  • FireFox (3.0.5) – [FireFox (3.1 PreAlpha) 兼容]
  • Google Chrome (1.0.154.)
  • Google Chrome (2.0.156.)(支持不是太好)
  • Internet Explorer (IE7/ IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

多重文字阴影

1

2

3

4

5

6

7

8

.textShadowMultiple {

 font-size: 3.2em;

 color: #FFF;

 text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;

 text-align: center;

 padding: 10px 0px 5px 0px;

 background: #151515;

}

浏览器支持

  • FireFox (3.0.5) – [FireFox (3.1 PreAlpha) 兼容]
  • Google Chrome (1.0.154.)
  • Google Chrome (2.0.156.)(支持不是太好)
  • Internet Explorer (IE7/ IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows)

特别声明，本系列文章译自：Zen Elements，非常感谢Alex的辛勤工作。

posted @ 2010-02-26 18:41  Kimura  Views(2519)  Comments(0)    收藏  举报