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

CSS3中Color的一些特性介绍

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

本文主要包含CSS3,Color等相关知识,佚名 希望在学习及工作中可以帮助到您
1.CSS 简介
CSS(Cascading Style Sheets),我们都不陌生吧。特别是我们在开发web项目的时候,用的更是不亦乐乎。

可是,你知道吗?CSS(注意 也就是CSS1)是在1996年的时候产生的标准,也就是到现在时隔(2012-1996)差不多15年的历史。毕竟时间在一直的走嘛,现在CSS3也在使用中,不过需要注意的是,CSS3并非是W3C的一个标准,它现在依旧是草案(Working Draft)状态,而不是最终的稳定版---W3C推荐。

据目前所知,CSS3已经增加了40多种模块(Module),既然还是草案,所以以后就还有增加的可能。所以,用我们的祈祷吧,希望CSS3赶快成为标准。那个时候我们程序员才是解放的时候。

在这篇文章中,我们会讨论一下CSS3中新增的40多个模块中的一个模块----Color模块。Color模块,比其他的模块更加的稳定。事实上,在2011年6月的时候,它就已经成为了W3C的推荐了,也就是标准了。

这新的CSS3 Color特性包括 在传统的hex 和RGB 值中增加了HSL特性,也就是增加了Opacity(透明度)和Alpha channels。

2.HSL Colors
在我们传统开发web网页的时候,我们在使用下面的关键字来进行对HTML和CSS进行颜色的设定。

Color 关键字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
Hexadecimal(16进制) 表示法
RGB (red,green,blue)表示法

比如,如下实例:

HSL浏览器兼容性:

目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持,而且不需要任何前缀修饰。

实例:

结果:

OK,那我们现在来调整一下:
OK,那我们现在来调整一下:

其实,也简单,说真的,我也不懂为什么要增加这种方增加颜色的方法。呵呵 不过也好,多一种方法把~。总归有好处的,不是吗?

Opacity(透明度) 和Gradients(渐变)
另外一个和颜色相关的CSS3属性是 Alpha 通道(channel)和Opacity(透明度)。基本上来说
作者:Lanny☆兰东才

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

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06详细解读CSS的预编译器PostCSS
  • 2017-08-06鼠标移动div时禁止选中div中的文字的方法
  • 2017-08-06css给span加float:right右浮动后内容换行下移
  • 2017-08-06CSS裁剪属性clip使用的实例教程
  • 2017-08-06CSS 的层叠规则说明
  • 2017-08-06WEB前端设计:良好的页面结构和优美网页的几点方法
  • 2017-08-06将一个DIV旋转的某一角度即90度/180度/270度及放大等问题
  • 2017-08-06分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
  • 2017-08-06CSS3 Flexbox中flex-shrink属性的用法示例介绍
  • 2017-08-06IE下模拟css3中的box-shadow(阴影)效果代码

文章分类

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

最近更新的内容

    • css clear之清除区域
    • E7 float:right 时元素换行出现在下一行的bug解决方法
    • CSS图片垂直居中方法整理集合 !(常见问题解答)
    • CSS中使用table-cell法来达到居中效果
    • CSS写的简单表格示例
    • DIV 边距属性在Chrome和IE中的区别深入理解
    • 如何去掉图片点击后的超级链接产生的虚框问题(两种实现方法)
    • 结合CSS3的布局新特征谈谈常见布局方法
    • div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
    • CSS中使用text-transform实现首字母大写

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

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