前端优
我用我的双手去成就我的梦想,我将遵循此道直至终结!
首页 > html+css >正文

文字阴影和盒子阴影

发布时间:2024-08-14 22:29 作者:一友画

一、文字阴影(text-shadow)

语法: text-shadow:横向偏移 纵向偏移 模糊距离 颜色;


案例代码示例:

<style type="text/css">
div{font-size: 50px;font-weight: bold;text-shadow: -4px -4px 2px #999;}
</style>
<div>文字阴影</div>

案例1

文字阴影


案例代码示例:

<style type="text/css">
div{width:300px;height: 200px;line-height: 200px;text-align: center;background: #999;color: #999;font-size: 50px;font-weight: bold;text-shadow: -1px -1px 2px #000,1px 1px 2px #fff;}
</style>
<div>文字凹进去</div>

案例2

文字凹进去

案例代码示例:

<style type="text/css">
div{width:300px;height: 200px;line-height: 200px;text-align: center;background: #999;color: #999;font-size: 50px;font-weight: bold;text-shadow: -1px -1px 2px #000,1px 1px 2px #fff;}
</style>
<div>文字凸出来</div>

案例3

文字凸出来


二、盒子阴影(box-shadow)

语法: box-shadow:横向偏移 纵向偏移 模糊距离 颜色;


案例代码示例:

<style type="text/css">
div{width: 100px;height: 100px;border: 2px solid #000;box-shadow: 6px 6px 3px #999;}
</style>
<div></div>

案例

 

以上内容,在整理时难免有疏漏错误之处,如有发现,可以通过顶部的“联系站长”提出反馈,感谢您的支持!