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开启硬件加速的使用和坑
Aug 21 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 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
实用函数10
2007/11/08 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python openssl模块安装及用法
2020/12/06 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
毕业实习评语
2014/02/10 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
工程承包协议书
2014/10/20 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python