CSS3基础(RGBa、text-shadow、box-shadow、border-radius)


Posted in HTML / CSS onNovember 13, 2012

RGBa
前三个值是RGB色值,最后一个值是十进制的alpha不透明度值(0=透明,1=不透明)
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 RGBa实现半透明背景
RBGa可以用于任何更颜色相关的属性,例如字体颜色、边框颜色、背景颜色、阴影颜色等。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
RGBa可以应用在所有颜色属性上
译者注:RGBa与opacity的区别在于opacity除了对被背景生效之外,应用它的元素内容也会继承它,也就说内容也会和背景一样变透明,RGBa正是为了解决这个问题的设计的。)

TEXT SHADOW
Text shadow由以下顺序构成:x-offset, y-offset, blur, and color,即垂直偏移、水平偏移、投影宽度(模糊半径)和颜色。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 text-shadow属性详解
如果对水平偏移(x-offset)应用负值,阴影将出现在元素的右边;如果对垂直偏移(y-offset)应用负值,阴影将出现在元素顶部,可以在阴影颜色上使用RGBa。模糊半径的值越大,阴影越模糊,设置为0时,阴影最清晰。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
在text-shadow颜色上使用RGBa
也可以指定一系列text-shadow值(用逗号分隔),下面的例子使用两个text-shadow实现文字凸起效果(上下各1px)。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
text-shadow 文字凸起效果
BORDER RADIUS
border radius(圆角)的速记法和padding和margin属性类似(例如border-radius:20px),为使浏览器能识别圆角属性,需添加特定的前缀,如”-webkit-”针对webkit浏览器,”-moz-”针对Firefox。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3圆角
每个角都可以指定不同的宽度,注意每个角分开写时Webkit和Firefox的差异。
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3圆角
BOX SHADOW
box-shadow的属性结构和text-shadow类似:x-offset, y-offset, blur, and color.
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
box-shadow属性详解
和text-shadow一样,可以设定多组值,下面的例子是三组box-shadow声明:

-moz-box-shadow:{
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

}
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
CSS 3 box-shadow

HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 #HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 #HTML / CSS
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JS Array对象入门分析
2008/10/30 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python发展简史 Python来历
2019/05/14 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
如何用python写个模板引擎
2021/01/14 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
海飞丝的广告词
2014/03/20 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
数学教育专业求职信
2014/07/22 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书