• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 纯CSS3实现的阴影效果

纯CSS3实现的阴影效果

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3阴影效果,css3盒子阴影,css3阴影,css3边框阴影,css3内阴影等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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


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


3、附上一张效果图

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

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

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

1、html样式


</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>
</div>

2、简单的css样式


}</p> <p>.white {
text-shadow: 1px 1px 2px #FFF, 0 0 0 #000;
}
</style>
</div>

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

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

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

</div>

您可能想查找下面的文章:

  • 详解CSS3阴影 box-shadow的使用和技巧总结
  • CSS3 2D模拟实现摩天轮旋转效果
  • CSS3模拟IOS滑动开关效果
  • CSS3打造磨砂玻璃背景效果
  • CSS3实现翘边的阴影效果的代码示例
  • 详解CSS3的图层阴影和文字阴影效果使用
  • CSS3实现曲线阴影和翘边阴影
  • CSS3实现千变万化的文字阴影text-shadow效果设计
  • 使用CSS3设计地图上的雷达定位提示效果
  • CSS3 text-shadow实现文字阴影效果

相关文章

  • 2017-06-02CSS3属性box-shadow使用详细教程
  • 2017-06-02使用css3实现的tab选项卡代码分享
  • 2017-06-02详解CSS3的opacity属性设置透明效果的用法
  • 2017-06-02CSS3支持IE6, 7, and 8的边框border属性
  • 2017-06-02使用CSS3的ruby-position固定注音位置的用法示例
  • 2017-06-02一款css实现的鼠标经过按钮的特效
  • 2017-06-02CSS3制作hover下划线动画
  • 2017-06-02基于css3实现漂亮便签样式
  • 2017-06-02利用CSS3的flexbox实现水平垂直居中与三列等高布局
  • 2017-06-02CSS3 2D模拟实现摩天轮旋转效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用CSS3编写类似iOS中的复选框及带开关的按钮
    • 使用css3实现超炫的loading加载动画效果
    • 深入理解css中vertical-align属性
    • CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
    • 利用CSS3实现圆角的outline效果的教程
    • CSS3 透明色 RGBA使用介绍
    • css3+伪元素实现鼠标移入时下划线向两边展开的效果
    • CSS3的新特性介绍
    • 总结30个CSS3选择器
    • CSS3结构性伪类选择器九种写法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有