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 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 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教程孙仲岳主讲
2008/01/07 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python之py2exe打包工具详解
2017/06/14 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
is_file和file_exists效率比较
2021/03/14 PHP
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
发展部经理职责规定
2014/02/22 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
docker 制作mysql镜像并自动安装
2022/05/20 Servers