注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

text-shadow和box-shadow  

2014-05-20 14:27:41|  分类: CSS3小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天学到了两个阴影属性趁热总结下。
一.text-shadow
1.语法
text-shadow:  [ x-offset  y-offset  blur-radius  color]
      [水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)]
      [1px  1px  1px  red]

想添加多个阴影可以这样写
text-shadow:  [ x-offset  y-offset  blur-radius  color, x-offset  y-offset  blur-radius  color]
      [1px  1px  1px  red,2px 2px 2px yellow]
其实就是加个逗号在后面接着写阴影效果罢了。
2.实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框切割</title>
<style>
.box{
width: 300px;
height: 100px;
line-height: 100px;
background: #656565;

text-align: center;
font-size: 45px;
font-weight: bolder;
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
</style>
</head>
<body>
<div class="box">Beautiful</div>
</body>
</html>

    不加阴影是这样的
text-shadow和box-shadow - 淡淡De影痕 - 淡淡De影痕的博客
加完之后是这样的~
text-shadow和box-shadow - 淡淡De影痕 - 淡淡De影痕的博客
二.box-shadow
1.语法
box-shadow:  [inset x-offset  y-offset  blur-radius spread-radius  color]
      [投影方式 水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)]
      [inset 1px  1px  1px 5px  red]
注: (1)第一个投影方式为可选属性,若不写会默认为外投影,若设置为inset则为内投影。
(2)阴影外延值不可为负值。
box-shadow的合写方式和text-shadow类似这里就不过多赘述了。
2.实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框切割</title>
<style>
.box{
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
background: #656565;
font-size: 45px;
font-weight: bolder;
box-shadow:inset 0px 0px 2px 5px #89A42A,inset 0px 0px 2px 7px #B1D23E;
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
</style>
</head>
<body>
<div class="box">Beautiful</div>
</body>
</html>

加上盒阴影后(内阴影)
text-shadow和box-shadow - 淡淡De影痕 - 淡淡De影痕的博客

三.兼容性
CSS3阴影属性IE9以下均不支持。。

欢迎大家交流指正~  淡淡De影痕
  评论这张
 
阅读(53)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018