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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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加Nginx实现动态裁剪图片方案
2014/03/10 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python Socket编程入门教程
2014/07/11 Python
跟老齐学Python之list和str比较
2014/09/20 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python怎么自定义捕获错误
2020/06/29 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python基于template实现字符串替换
2020/11/27 Python
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
运动会领导邀请函
2014/02/05 职场文书
主管会计岗位职责
2014/03/13 职场文书
中文专业求职信
2014/06/20 职场文书
规范化管理年活动总结
2014/08/29 职场文书
个人收入证明范本
2014/09/18 职场文书
大学生个人总结范文
2015/02/15 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书