div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

5个CSS3技术 实现设计增强!

文章来源:菏泽网站建设  文章作者:javaeye  日期:2009年08月30日
虽然目前有许多的CSS的新特性都还没有得到官方的认可,但很多浏览器(不包括IE)已经开始实现CSS3的规范。 在使用这些CSS3的新功能时,最关键的是要将它们作为设计增强。顾名思义,设计增强也就是在不影响可用性的情

虽然目前有许多的CSS的新特性都还没有得到官方的认可,但很多浏览器(不包括IE)已经开始实现CSS3的规范。

在使用这些CSS3的新功能时,最关键的是要将它们作为设计增强。顾名思义,设计增强也就是在不影响可用性的情况下加强视觉吸引效果。

以下将会列举5个不同的CSS3 属性:

这是在没有应用CSS3效果之前的原始图片

点击浏览下一页

1.透明颜色

目前支持的浏览器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA允许你控制某个特性填充颜色的不透明度,无论是文本、背景、边框还是背景颜色。

设置颜色透明度的时候,你需要使用RGB颜色值,不可以再使用十六进制值,而那个”A”则代表透明度,你可以设置从0(透明)到1(不透明)之间的数值。

1 rgba(0-255,0-255,0-255,0-1)

你还可以单独使用RGB值:

1.topbox {

2 color: rgb(235,235,235);

3 color: rgba(255,255,255,0.75);

4 background-color: rgb(153,153,153);

5 background-color: rgba(0,0,0,0.5);

6 border-color: rgb(235,235,235);

7 border-color: rgba(255,255,255,0.65);

8 }

有个好消息就是至少你可以使用CSS滤镜单独针对IE浏览器设置背景颜色。

点击浏览下一页

注:由于Wordpress不能显示以上代码,所以将其弄成图片,所以你需要自行写以上代码了哦。

点击浏览下一页

2.圆角

目前支持的浏览器:Apple Safari 3+, Firefox 1+, Google Chrome 1+

边框半径用于设置和模型每个角的曲率,仿佛有一对与特定的角落虚圆半径(r):

1 border-radius: r;

虽然border-radius是未来CSS3的一部分,不过现在无论Mozilla(Firefox)和Webkit(Safari和Chrome)都已经有了自己的圆角版本。

1-webkit-border-radius: 10px;

2-moz-border-radius: 10px;

3 border-radius: 10px;

你也可以单独设置某个角的半径:

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

点击浏览下一页

3.文字阴影

目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

为文本添加阴影效果,控制阴影左/右和上/下的偏移,还可以设置阴影的颜色。

1 text-shadow: x y blur color;

你可以结合透明颜色值来设置文字阴影的明暗:

1 text-shadow: -2px 2px 10px rgba(0,0,0,.5);

你还可以让文字有多个阴影,每个阴影属性使用逗号分隔:

1 text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45),

2 15px -4px 3px rgba(255,0,0,.75);

点击浏览下一页

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

1 box-shadow: x y blur color;

和文本阴影一样,Mozilla 和 Webkit 也有他们自己的盒阴影规则:

1-webkit-box-shadow: 0 0 10px rgb(0,0,0);

2-moz-box-shadow: 0 0 10px rgb(0,0,0);

3 box-shadow: 0 0 10px rgb(0,0,0);

你也可以为某个盒元素添加多个阴影,仍然是使用逗号分隔。

1-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

 2 15px -20px 20px rgba(255,0,0,.75);

3-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

4 15px -20px 20px rgba(255,0,0,.75);

5 box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

6  15px -20px 20px rgba(255,0,0,.75);

点击浏览下一页

5.多背景图

目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+

为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然,你还要为其它浏览器准备一张完整的图片。

1 background-image: url(astro-127531.png);

2 background-image: url(astro-127531.png),url(Hubble-112993.png);

3 background-repeat: no-repeat;

4 background-position: bottom left;

5 background-position: bottom left, top right;

点击浏览下一页

“买五送一”-旋转任何元素

目前支持的浏览器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

虽然它目前不算是CSS3中的一部分,但Webkit已经有了它自己的一套变形属性,Mozilla也在效仿。变形包含了很多不同类型的值,不过其中最有意思也是最有用的就是旋转了。

1-webkit-transform: rotate(-15deg);

2-moz-transform: rotate(-15deg);

点击浏览下一页

下图为不支持CSS3的浏览器所呈现出来的样子(如Opera 9):

点击浏览下一页

查看实例Demo(需要使用Safari 4+, Firefox 3.5+, or Chrome 1+浏览器)

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:CSS 3 灵活的 Box Model
下一篇:5种在设计中应用光线和阴影的简单技法
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度