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-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
react-router实现按需加载
2017/05/09 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python金融数据可视化汇总
2017/11/17 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
保密工作实施方案
2014/02/24 职场文书
乔迁之喜主持词
2014/03/27 职场文书
演讲稿开场白台词
2014/08/25 职场文书
前台接待岗位职责
2015/02/03 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python