shadow阴影

1、语法: 

  对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}

  注:text-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。

 
2、取值: 

  box-shadow属性最多可以有6个参数设置,他们分别取值:

  (1) 阴影水平偏移量 :是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;

  (2) 阴影的垂直偏移量 :是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;

  (3) 阴影模糊半径 :此参数是可选,但其值只能是为正值。如果值越大,阴影越模糊,反之阴影越清晰。如果其值为0时,表示阴影不具有模糊效果;

  (4) 阴影颜色 :此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数;

  在CSS3没有问世之前,处理文字阴影的方法,基本上都是图片。直到CSS3的出现,让我们制作文字阴影的方法又有了进一步的提高。其实文字阴影——text-shadow在CSS2里面出现过,但是在CSS2.0又没无情的抛弃了,现在CSS3中又让使用了,这说明文字阴影——text-shadow还是值得咱们重视的。所以作为一名合格的前端人员,掌握文字阴影那必须是当务之急了。

  CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。

3、CSS3单词与语法 

  CSS3单词: text-shadow

  语法结构:text-shadow: 5px 2px 6px black;

  5px 代表着:阴影距离文字左5px显示

  2px 代表着:阴影距离文字上2px显示

  6px 代表着:阴影大小范围

  black 代表着:阴影颜色为黑色

比如:

<div class="orange" id="all">
    <h1>smile微笑</h1>
</div>
     body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}

			.orange {
				background-color: #f8f8f8;
				padding: 30px;
			}

			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}          

效果如图:


时间: 2024-08-09 08:08:59

shadow阴影的相关文章

iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)

原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 shadow 主要有三个影响因素 x off-set 决定阴影沿着X的偏移量 y off-set 决定阴影沿着y的偏移量 blur value 决定了阴影的边缘区域是不是模糊的 其中不同的blur效果的图 注意: shadow也是和绘制状态相关的,意味着如果仅仅绘制一个subPath的shadow,注意s

CSS3 阴影(text-shadow)

在以前,阴影效果一般都是做成图片,现在有了CSS3 可以直接使用text-shadow 属性来实现阴影.这个属性可以有两个作用,产生阴影和模糊主体.这样在不需要图片的情况下就能给文字增加质感. 基本语法: text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color)  x轴

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/

(转)Shadow Map &amp; Shadow Volume

转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形学爱好者谈论的对象的.虽然这个游戏还没有上市,但是凭借 John Carmack 的传奇经历以及 DOOM3发布的一些让人惊讶的预览图片,我们仍然有理由认为它将会是 2004 年最热门的 FPS 游戏之一. id software向来都不吝惜为了达到最好的图像效果而使用最先进的渲染技术,这曾经使得玩

HTML/CSS 常用单词整理

页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容: container/con 容器: wrapper/wrap 包裹(类似于container): menu 菜单: sub_menu/second_menu 子菜单/二级菜单: list 列表: section 分区/分块(类似于div); article 文章: aside 侧边栏/广告: f

CSS3小分队——text分身text-shadow

上一篇:<CSS3小分队——进击的border-radius> 上一篇把border-radius拉上台走了个秀,今天我们轮着角色接着走.台下一团shadow在蠕动,恩,今天上台的是一个shadow属性.关于shadow的属性有两个:box-shadow和text-shadow,今天我们说的是text-shadow先. 一.shadow阴影的背后 text-shadow在CSS2中出现过,可是昙花一现,在CSS2.1中又被抛弃了,现在这团阴影又在CSS3中满血归来. 顾名思义,text-sha

IOS-UI-UILable

//用于文本展示 UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 200, 300)]; //使用测色器自选颜色 label.backgroundColor = [UIColor colorWithRed:26/255.f green:124/255.0 blue:248/255.0 alpha:1]; label.text = @"我来自中国,这是个美丽的地方";//文本 label.textCo

前端的瑞士军刀:Modernizr.js

前言 Modernizr.js既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验. 作用: 从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标签的浏览器,如IE6,7,8追加一点由Remy Sharp开发的html5垫片脚本,使其识别<aside>.<section>等html5元素之外,它主要做的就是浏览器‘功能检测’. 因此,它知道浏览器是否支持各种html5和css3特性. 下载地址:www.modernizr.com

css3 animation之box-shaow

/*Typing Loader*/ div.typing {  width: 400px;  height: 300px;  margin: 20px auto 500px;  border: 2px #0f0 solid;  background: #000; } .typing_loader{ width: 6px; height: 6px; border-radius: 50%; -webkit-animation: typing 6s linear infinite alternate;