前三个值分别代码RBG的值,最后一个值代表透明度(0表示透明,1表示不透明)。
RGBA可以用于任何和color有关的属性,例如字体颜色、边框颜色、背景颜色和阴影颜色等。
文字阴影
文字阴影的结构按照这样的顺序:x-offset, y-offset, blur, 和 color。
为x-offset设置负值会将阴影位置改变到左边,为y-offset设置负值会将阴影位置改变到头部。我们也可以使用RBGA设置阴影的颜色。
你可以设置一组text-shadow,中间以逗号相隔。下面的例子使用两个text-shadow(顶部1px 和 底部1px),为名字设置了新闻文字效果。
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
边框半径
边框半径对属性赋值的便捷写法类似于padding和margin(例如:border-radius: 20px
)。为了让有些浏览器能正确渲染效果,需要在属性前面加前缀,例如针对webkit浏览器需要添加 "-webkit-
" 前缀,firefox浏览器需要添加 "-moz-
" 前缀。
你可以为不同的边角设置不同的半径,注意webkit和firefox浏览器,每个边角有不同的属性名称。
盒子阴影
盒子阴影的结构和text-shadow
属性一样,按照这样的顺序: x-offset, y-offset, blur, 和 color。
你可以为盒子阴影设置很多效果,例如下面的例子使用一组参数来设置效果(参数之间以逗号相隔)。
-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);
相关推荐
在 http://www.cnblogs.com/strick/p/4843595.html 有描述
今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...
将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。
本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safari、IE9等可点击图片查看演示。)
NULL 博文链接:https://jm1999.iteye.com/blog/2218022
此效果没有用图片和任何JS!适用浏览器名称及版本:FF 3.5 , Opera 10.5 , Safari 4 , Google Chrome 4.0 , IE 9 IE8及之前版本均不能看到效果!!... 谷歌下个版本将会很好的支持 box-shadow inset
border-color border-image border-radius box-shadow Backgrounds background-origin background-clip background-size multiple backgrounds Color HSL colors HSLA colors opacity RGBA colors Text effects text...
你知道吗,今天给大家分享一个脚本工具,可以帮助您启用CSS3的支持IE浏览器(IE6)与新的CSS3属性,包括:border-radius属性,box-shadow(阴影),text-shadow(影子的文本)。 使用方法很简单: behavior: url(ie...
} ::-webkit-scrollbar-thum {{border-radius:5px; 背景颜色:白色; -webkit-box-shadow:2px 2px 6px rgba(0,0,0,.5),插入-2px 2px 2px 2px rgba(204,204,204,0.1),插入2px -2px 2px 2px rgba(0,0,0,0.2...
css样式,项目中用到的,记录在此 页面设计遇到的一些问题: 1、div悬浮感、div浮动(变成行内块)、清除浮动 样式: box-shadow: 2px 2px 5px #bbb; float: left; clear: both; 2、外边距自动...
-webkit-box-shadow: 3px 3px 4px #999; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#999999'); /* For IE 8 */ -ms-filter: "progid:...
css3和css,在编写code的时候,除了对一些css3中新出现的属性设置,其它完全一样。 CSS3新增属性 box-shadow(阴影效果) border-colors(为边框设置多种颜色) boder-image(图片边框) text-shadow(文本阴影) ...
<!..._position:;min-height:100%}#head{padding-bottom:100px;text-align:center;*z-index:1}#ftCon{height:100px;position:absolute;..._margin-top:-3px;z-index:2;overflow:hidden;box-shadow:1px 1px 5...
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 box-shadow: 5px 0 5px 0 #000 outset;// 效果图如下 border-radius 圆角...
属性:border-radius: 取值: px % 3、边框阴影 属性:box-shadow: 取值: inset h-shadow v-shadow blur spread color; 1、 h-shadow:阴影的水平偏移距离 px 正值为右偏移 负值为做偏移 2、v-shadow:阴影的...
CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加...在 CSS3 中 border-radius 属性被用于创建圆角: 这是圆角边框! 实例 在div中添加圆角元素: div { border:2px solid; border-radius:25px; } CSS3
<style type="text/css"> body{ background-color: #000; } .box{ position: relative; width: 200px;height: 200px; background-color: transparent; margin-top: 100px; ...