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 简单又实用的5个属性
Mar 04 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 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
javascript事件模型代码
2007/07/01 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python常用库推荐
2016/12/04 Python
Python 数据结构之旋转链表
2017/02/25 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
会计电算化大学生职业规划书
2014/02/05 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
纪委立案决定书
2015/06/24 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android