2:圆角
目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。
这个问题将在CSS3中很简单的解决掉,那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。
像这样:
广州网站建设,网站建设,广州网页设计,广州网站设计
- #round{
- background-color:#000;
- border:1pxsolid#000;
- }
现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。
- #round{
- background-color:#000;
- border:1pxsolid#000;
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- }
在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。 注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。 border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。
3:个别的圆角
如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:
- #indie{
- background-color:#000;
- border:1pxsolid#000;
- -moz-border-radius-topright:10px;
- -moz-border-radius-bottomright:10px;
- -webkit-border-top-left-radius:10px;
- -webkit-border-bottom-left-radius:10px;
- }
试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!
广州网站建设,网站建设,广州网页设计,广州网站设计
4:以CSS3的方式修改不透明度
现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。 这行代码很好记,仅仅是“opacity:value;”:
- #opacity{
- background-color:#000;
- opacity:0.3;
- }