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高级选择器使用方法
Dec 02 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 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 时间计算问题小结
2009/01/04 PHP
php 文件上传系统手记
2009/10/26 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
教师实习自我鉴定
2013/12/14 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
装修协议书范本
2014/04/21 职场文书
服装设计专业求职信
2014/06/16 职场文书
护士先进个人总结
2015/02/13 职场文书
读书笔记怎么写
2015/07/01 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
MySQL创建管理HASH分区
2022/04/13 MySQL