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不透明度实例讲解
Apr 26 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP中常用的魔术方法
2017/04/28 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python保存网页图片到本地的方法
2018/07/24 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python下载库的步骤方法
2019/10/12 Python
python 实现简单的FTP程序
2019/12/27 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
西门豹教学反思
2014/02/04 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Python函数中apply、map、applymap的区别
2021/11/27 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
tomcat下部署jenkins的方法
2022/05/06 Servers