网页边框和网页文字阴影

CSS:

/* 为 DIV 加阴影 */

.out {

position:relative;

background:#bbb;

margin:10px auto;

width:240px;

}

.in {

background:#fff;

border:1px solid #555;

padding:10px 5px;

position:relative;

top:-5px;

left:-5px;

}

/* 为图片加阴影 */

.imgShadow {

position:relative;

background:#bbb;

margin:10px auto;

width:220px;

}

.imgContainer {

position:relative;

top:-5px;

left:-5px;

background:#fff;

border:1px solid #555;

padding:0;

}

.imgContainer img {

display:block;

}

</style>

HTML:

<h4>为 DIV 加阴影:</h4>

<div class="out">

<div class="in" >

<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />

</div>

<h4>为图片加阴影:</h4>

<div class="imgShadow">

<div class="imgContainer" >

<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />

</div>

效果图：


--------------------------------------------------------------------------------------------------------------------------------

1.一个div的案例

color=#888888 , direction=120 , strength=5 ); width:200px; height:400px;

border:1px solid #000; background:#f3f3f3}</style>
<table id="mydiv"><tr><td>this is shadow</td></tr></table>

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。

上一篇介绍了：CSS3教程(3):border-color网页边框色彩

一般可以分为box-shadow和textshadow两类。

CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色

了解了这些，我们就可以以下面的方法开始体验了…

浏览器兼容性：

在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。

#boxShadow{border: 5px solid #111;-webkit-box-shadow: 5px 5px 7px #999;-webkit-border-bottom-right-radius: 15px;padding: 15px 25px;height: inherit;width: 590px;
}

这种效果同样可以用于图片…

浏览器支持：

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
Google Chrome (1.0.154.)
Google Chrome (2.0.156.)(支持不是太好)
Internet Explorer (IE7/ IE8 RC1)
Opera (9.6)
Safari (3.2.1, Windows)

简单文字阴影：

.textShadowSingle {font-size: 3.2em;color: #F5F5F5;text-shadow: 3px 3px 7px #111;text-align: center;
}

浏览器支持：

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
Google Chrome (1.0.154.)
Google Chrome (2.0.156.)(支持不是太好)
Internet Explorer (IE7/ IE8 RC1)
Opera (9.6)
Safari (3.2.1, Windows)

多重文字阴影

.textShadowMultiple {font-size: 3.2em;color: #FFF;text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;text-align: center;padding: 10px 0px 5px 0px;background: #151515;
}

浏览器支持

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
Google Chrome (1.0.154.)
Google Chrome (2.0.156.)(支持不是太好)
Internet Explorer (IE7/ IE8 RC1)
Opera (9.6)
Safari (3.2.1, Windows)

网页边框和网页文字阴影相关推荐

CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...
word中从网页中复制的文字阴影如何去除？
从网页上复制一些资料,结果粘贴在WORD中却有阴影,去除方法: 1.CTRL+A,全选复制,菜单-编辑-选择性粘贴-无格式文本. 2.选中内容,菜单:编辑--清除--格式. 3.先复制到记事本 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
美工（一）网页颜色搭配技巧文字字体、字号、字体排版等
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快 ...

网页边框和网页文字阴影

网页边框和网页文字阴影相关推荐

最新文章

热门文章