`

css3中的几个属性:text-shadow、box-shadow 和 border-radius

 
阅读更多

前三个值分别代码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);

分享到:
评论

相关推荐

    CSS3中border-radius、box-shadow与gradient那点事儿

    在 http://www.cnblogs.com/strick/p/4843595.html 有描述

    CSS3属性box-shadow使用指南

    今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...

    CSS text-shadow,box-shadow,border-radius属性

    将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。

    CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

    本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safari、IE9等可点击图片查看演示。)

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    NULL 博文链接:https://jm1999.iteye.com/blog/2218022

    CSS3伪三维径向圆形按钮,无JS及图片,纯HTML.rar

    此效果没有用图片和任何JS!适用浏览器名称及版本:FF 3.5 , Opera 10.5 , Safari 4 , Google Chrome 4.0 , IE 9 IE8及之前版本均不能看到效果!!... 谷歌下个版本将会很好的支持 box-shadow inset

    css3.0参考手册 CHM

    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支持IE6, 7, and 8的边框border属性

    你知道吗,今天给大家分享一个脚本工具,可以帮助您启用CSS3的支持IE浏览器(IE6)与新的CSS3属性,包括:border-radius属性,box-shadow(阴影),text-shadow(影子的文本)。 使用方法很简单: behavior: url(ie...

    绿色滚动条 - 纯CSS3(来自ZIG)「Green Scroll Bar - Pure CSS3 (from ZIG)」-crx插件

    } ::-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...

    common.css

    css样式,项目中用到的,记录在此 页面设计遇到的一些问题: 1、div悬浮感、div浮动(变成行内块)、清除浮动 样式: box-shadow: 2px 2px 5px #bbb;  float: left; clear: both; 2、外边距自动...

    纯css带箭头div

    -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:...

    CSS和CSS3思维导图(xmind版)

    css3和css,在编写code的时候,除了对一些css3中新出现的属性设置,其它完全一样。 CSS3新增属性 box-shadow(阴影效果) border-colors(为边框设置多种颜色)  boder-image(图片边框) text-shadow(文本阴影) ...

    三星9305收索

    <!..._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...

    css3 边框、背景、文本效果的实现代码

    //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 box-shadow: 5px 0 5px 0 #000 outset;// 效果图如下 border-radius 圆角...

    css入门笔记

    属性: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,你可以创建圆角边框,添加...在 CSS3 中 border-radius 属性被用于创建圆角: 这是圆角边框! 实例 在div中添加圆角元素: div { border:2px solid; border-radius:25px; }   CSS3

    index.html

    <style type="text/css"> body{ background-color: #000; } .box{ position: relative; width: 200px;height: 200px; background-color: transparent; margin-top: 100px; ...

Global site tag (gtag.js) - Google Analytics