5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)


Posted in HTML / CSS onAugust 15, 2016

做:5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

二、先是建立两个文本不做处理运行如图5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

三、给第一个div字体加上阴影

text-shadow: 5px 5px 10px red; 

text-shadow: 5px 5px 5px red,5px -5px 10px yellow;
box-shadow:用法与text-shadow类似,只不过它是对盒子,比如DIV
text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...前两个值可以是负数,第三个不能使负数,可以是0(无效果)

5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

 

四、给第一个div加上倒影

-webkit-box-reflect:below 10px ;

方向 (above上 below下 左右left right) 间距。

注意:倒影不占文档流的空间,层级高于文档流倒影是针对标签(宽高)进行的5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

五、加上渐变

background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );

第一个百分数是从0%到这个百分数全是这种颜色,最后一个百分比是从这个百分数到100%全是这种颜色,中间如果不同百分数就是渐变,一样就是分界线。

5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

六、所有代码:  

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title>CSS3</title>    
  6.         <style type="text/css">    
  7.             div{    
  8.                 font-size: 30px;    
  9.                 width: 300px;    
  10.                 height: 100px;    
  11.                 background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
  12.                 /*渐变*/    
  13.                 color: blue;    
  14.                 -webkit-box-reflect:below 10px ;    
  15.                 /*倒影*/    
  16.                 text-shadow: 5px 5px 10px red;    
  17.                 /*阴影*/    
  18.             }    
  19.             span{    
  20.                 background: aqua;    
  21.             }    
  22.                  
  23. </style>    
  24.     </head>    
  25.     <body>    
  26.         <div>    
  27.             <p>我会翻跟斗!!哈哈哈</p>    
  28.         </div>    
  29.         <span>    
  30.             倒影不能把握的位置给占了!倒影不能把握的位置给占了!    
  31.             倒影不能把握的位置给占了!倒影不能把握的位置给占了!    
  32.         </span>    
  33.     </body>    
  34. </html>  

以上这篇5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
You might like
星际玩家的三大定律
2020/03/04 星际争霸
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
js实现图片懒加载效果
2017/07/17 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python代码的打包与发布详解
2014/07/30 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
金融行业务员的自我评价
2013/12/13 职场文书
教师网络培训感言
2014/03/09 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript