CSS3属性使网站设计增强同时不消弱可用性

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3等相关知识,佚名希望在学习及工作中可以帮助到您

层叠样式表(css)是Web设计的一种语言，CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢？虽然还有一些新属性没有得到官方的确认，但是一些浏览器已经开始支持来自CSS3得新特性了。
　　但问题是——许多浏览器支持了，唯独最主要的Internet Explorer浏览器仍不支持！
　　很多人尤其是中国的前端er们会觉得既然IE不支持，那就先不关心CSS3。其实不应这样的，CSS3现在能为我们带来什么好处呢？至少现在我们就能使用那些CSS3的新特性来进行设计增强。

设计增强是指在不影响网站可用性的基础上，使用一些高级样式来提升网站的视觉效果。

其实对于如何区分设计增强与不影响可用性的区别还是有一定的困难的:

设计增强的例子：使用border-radius属性为盒模型添加圆角，让网站更富有吸引力。不过，即使圆角属性不被浏览器支持，它也不会影响网站的正常使用。
设计消弱可用性的例子：在某个元素上面层叠了一个使用了RGBA颜色值背景的元素，上面的元素使用半透明效果，很显然这两个元素都是必须让用户看到的。很显然，有一部分使用旧浏览器的用户想要看到下面的元素内容是很困难的，这种设计就降低了可用性。

　　下面微课江湖将带你一同学习5个不同的CSS3属性，如果从现在起你就开始尝试在你的网站中使用它们，那你将让你的网站实现既设计增强又不会消弱可用性。

　　以下是在应用CSS3设计增强之前的普通效果:
css3-新特性

1.透明颜色

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

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

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

你还可以单独使用RGB值:

有个好消息就是至少你可以使用CSS滤镜单独针对IE浏览器设置背景颜色。
IE条件注释-背景色透明
点击图片查看清晰大图
注:由于Wordpress不能显示以上代码，所以将其弄成图片，所以你需要自行写以上代码了哦。

css3-教程

2.圆角

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

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

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

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

CSS3

Mozilla

您可能想查找下面的文章:

2017-08-06百度有啊 CSS圆角实现代码
2017-08-06css中postion的fixed与absolute区别详解
2017-08-06CSS3 Columns分列式布局方法简介
2017-08-06一款利用纯css3实现的超炫3D表单的实例教程
2017-08-06CSS定义超链接样式的顺序及四个伪类的用法示例介绍
2017-08-06用CSS实现三列DIV等高布局以传达更好的视觉效果
2017-08-06css三级下拉菜单实现方法分享
2017-08-06ie6 表格td中无内容时不显示边框的解决办法
2017-08-06CSS压缩的技巧与工具
2017-08-06DIV实现简易漂浮层放置分页信息思路分享

CSS3属性使网站设计增强同时不消弱可用性

1.透明颜色

2.圆角

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容