纯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实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
浅析PHP中Collection 类的设计
2013/06/21 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php常用hash加密函数
2014/11/22 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Python入门篇之正则表达式
2014/10/20 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Python面试题集
2012/03/08 面试题
迟到检讨书400字
2014/01/13 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
计生专干事迹
2014/05/28 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
文案策划岗位职责
2015/02/11 职场文书
入党积极分子个人总结
2015/03/02 职场文书
公路施工安全责任书
2015/05/08 职场文书
公司考勤管理制度
2015/08/04 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB