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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
什么是方法的重载
2013/06/24 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
内容编辑个人求职信
2013/12/10 职场文书
工资收入证明
2014/10/07 职场文书
委托书格式要求
2015/01/28 职场文书
社区文明倡议书
2015/04/28 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Python经常使用的一些内置函数
2022/04/11 Python
Go语言编译原理之源码调试
2022/08/05 Golang