• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > CSS3属性使网站设计增强同时不消弱可用性

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

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

本文主要包含css3属性,css3属性选择器,css3属性大全,css3新增属性,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(不透明)之间的数值。

</div>

你还可以单独使用RGB值:

</div>

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

css3-教程

2.圆角

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

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

</div>

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

</div>

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

CSS3

Mozilla

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

  • 总结30个CSS3选择器
  • CSS3利用text-shadow属性实现多种效果的文字样式展现方法
  • CSS3的column-fill属性对齐列内容高度的用法详解
  • CSS3中的常用选择器使用示例整理
  • CSS3中各种颜色属性的使用教程
  • CSS3中的content属性使用示例
  • 使用CSS3制作一个简单的Chrome模拟器
  • css3选择器基本介绍
  • CSS3属性background-size使用指南
  • CSS3属性box-shadow使用指南

相关文章

  • 2017-06-02CSS3制作酷炫的三维相册效果
  • 2017-06-02CSS3 制作绽放的莲花采用效果叠加实现
  • 2017-06-02利用css3 translate完美实现表头固定效果
  • 2017-06-02使用css3制作动感导航条示例
  • 2017-06-02CSS3实现swap交换动画
  • 2017-06-02使用css3实现的windows8开机加载动画
  • 2017-06-02纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
  • 2017-06-02css3设置box-pack和box-align让div里面的元素垂直居中
  • 2017-06-02深入浅出CSS3 background-clip,background-origin和border-image教程
  • 2017-06-02实例讲解CSS3中的border-radius属性

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3属性box-shadow使用指南
    • CSS3中的Transition过度与Animation动画属性使用要点
    • 基于css3仿造window7的开始菜单
    • CSS3制作炫酷的自定义发光文字
    • css实例教程 一款纯css3实现的超炫动画背画特效
    • css3加js做一个简单的3D行星运转效果实例代码
    • 利用CSS3实现自定义滚动条代码分享
    • CSS3动画效果回调处理详解
    • 使用CSS3编写类似iOS中的复选框及带开关的按钮
    • 一款利用纯css3实现的win8加载动画的实例分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有