纯CSS3实现的阴影效果


Posted in HTML / CSS onDecember 24, 2014

    早上没事干,感觉字体阴影的效果还是好看的,那么就来一个小demo吧!

1、这是html 简单的有一个标签或者盒子都可以

复制代码
代码如下:

<div class="demo11">我爱考试</div>

2、css样式,用css3编写样式,感觉还不错。

复制代码
代码如下:

.demo11 {
border: 1px dashed #f2b;
height: 150px;
width: 250px;
text-align: center;
line-height: 150px;
margin: 0 auto;
font-size: 50px;
color: orange;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}

3、附上一张效果图

纯CSS3实现的阴影效果

  一个简单的字体阴影效果就是这么出来的,其中还可以定义字体的样式(font-family)效果会更好的哦!

以上呢,这就是字体外阴影的一个小demo;

下面呢,来看一下内阴影吧,

1、html样式

复制代码
代码如下:

<div class="block black" style="background-color: #444;">
<span style="color: rgba(0, 0, 0, 0.5);">
I love test
我爱考试
</span>
</div></p> <p><br clear="all"></p> <p><div class="block white">
<span style="color: rgba(128, 128, 128, 0.5);">
I love test
我爱考试
</span>
</div>

2、简单的css样式

复制代码
代码如下:

<style>
.block {
font-size: 2em;
font-weight: bold;
margin: 2px;
padding: 2px;
border: solid #AAA 1px;
display: inline-block;
}
.black {
text-shadow: 1px 1px 2px #888, 0 0 0 #000;
}</p> <p>.white {
text-shadow: 1px 1px 2px #FFF, 0 0 0 #000;
}
</style>

  都是比较简单的样式,很容易理解吧!

  附上小图一张,供参考了!

纯CSS3实现的阴影效果

这样呢,内阴影也就出来了,虽然不是很好看,但是也挺实用的,嘻嘻!

HTML / CSS 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 #HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
js中的面向对象入门
2017/03/06 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python处理csv数据的方法
2015/03/11 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python flask 多对多表查询功能
2017/06/25 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python中强大的format函数实例详解
2018/12/05 Python
ipad上运行python的方法步骤
2019/10/12 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
金山毒霸系列的笔试题
2013/04/13 面试题
家长会欢迎标语
2014/06/24 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
中层干部考核评语
2015/01/04 职场文书