css怎么做倒影虚化,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(无效果)
四、给第一个div加上倒影
-webkit-box-reflect:below 10px ;
方向 (above上 below下 左右left right) 间距。
注意:倒影不占文档流的空间,层级高于文档流倒影是针对标签(宽高)进行的
五、加上渐变
background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );
第一个百分数是从0%到这个百分数全是这种颜色,最后一个百分比是从这个百分数到100%全是这种颜色,中间如果不同百分数就是渐变,一样就是分界线。
六、所有代码:
CSS3
div{
font-size: 30px;
width: 300px;
height: 100px;
background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );
/*渐变*/
color: blue;
-webkit-box-reflect:below 10px ;
/*倒影*/
text-shadow: 5px 5px 10px red;
/*阴影*/
}
span{
background: aqua;
}
我会翻跟斗!!哈哈哈
倒影不能把握的位置给占了!倒影不能把握的位置给占了!
倒影不能把握的位置给占了!倒影不能把握的位置给占了!
希望感兴趣的朋友关注我以后一起交流!
CSS 3 阴影,倒影,渐变
盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...
css3中的渐变小总结
= 导航 顶部 线性渐变 径向渐变 透明度 边框 阴影 顶部 线性渐变 径向渐变 透明度 边框 阴影 系列教程 CSS3 Gradient分为linear-gradient(线性渐变)和r ...
CSS3图片倒影技术实现及原理
CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
【转】 CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
CSS3阴影 box-shadow的使用
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...
CSS3阴影 box-shadow的使用总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)
http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...
Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
随机推荐
STM32基于HAL库通过DMA读写SDIO
通过STM32CUBEMX生成DMA读写sdio的工程,再读写过程中总会卡死在DMA中断等待读写完成的while中,最终发现while等待的标志在SDIO的中断里置位的,而SDIO中断优先级如果小于或 ...
PHP中设置时区方法小结
找到原因后,在网上搜索到了一些关于PHP的时区设置方法: 1.修改php.ini,在php.ini中找到data.timezone =去掉它前面的;号,然后设置data.timezone = “Asi ...
NOIP2012 同余方程-拓展欧几里得
题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输出只有一行,包含一个正 ...
ecshop如何去除后台左侧云服务中心菜单
介绍一下如何去除后台云服务中心菜单: 打开admin/templates/menu.htm,把539行的 document.getElementById("menu-ul").in ...
WisDom.Net 框架设计(一) 总体框架
WisDom.Net总体框架 1.目标 WisDom.Net 做为以后快速开发相关的软件的基础框架,实现用户,权限,角色,菜单,和工作流的管理功能.相关功能可以独立使用,快速用于其他程序的开发.预计 ...
Sphinx学习笔记2
因为网站搜索的需要,启动了一个搜索引擎项目,其实也算不上完整的搜索引擎,需求很简单,如下: 1)搜索产品名.类别名.品牌名.副标题.关键字等字段 2)数据量目前为13000左右,未来可 ...
kvm之四:从网上镜像安装虚拟机Centos6.8
1.再加块硬盘,格式化挂载至新建目录/kvm2下 2.CentOS 6.8镜像地址 http://mirrors.163.com/centos/6.8/os/x86_64/ 3.配置安装参数,执行安装 ...
开源项目福利-github开源项目免费使用Azure PipeLine
微软收购Github后,很多人猜想微软可能会砍掉VSTS,然而事实VSTS并没有砍掉,关于Azure Devops的详细信息可以查看 这篇博客,如果想查看原文也可以从链接里提供的原始地址里查看. 今天 ...
如何实现javascript js 类命名空间的写法
转载 猫猫小屋http://www.maomao365.com/?p=823 在C#中有namespace概念,java中有package的概念,有了这些概念之后,在系统的运行时,每一个方法就会拥有唯 ...
Bitvise 使用公私玥免密登陆 服务器
远程机linux 首先需要把 生成 公私玥,并且把公钥 写到 远程linux 主机的,你要登陆的用户下面 的.ssh 文件里面的authorized_keys 文件里面.这个参考我的另一篇关于linu ...
css怎么做倒影虚化,5分钟让你掌握css3阴影、倒影、渐变小技巧!相关推荐
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- cdr怎么做文字路径_CorelDRAW文件问题 CDR文字路径问题 颜色的小技巧
CorelDRAW文件问题 CDR文字路径问题 颜色的小技巧 CorelDRAW文件问题 大虾们,请问下有锁定SVG数据怎么解决呀 文件卡得要死 把文件内容删除还是有数据 -- 你可以 CTRL A ...
- 写个性签名也要花心思,做短视频如何设置个签?四个小技巧来帮忙
写个性签名也要花心思,做短视频如何设置个签?四个小技巧来帮忙 在刚开始做短视频的时候,无论是短视频的名称还是头像,又或者是个性签名,都是应该花点心思去做的.而在这其中,个性签名往往可以展示出来自己的短 ...
- [css] 让网页的字体变得清晰,变细用CSS怎么做?
[css] 让网页的字体变得清晰,变细用CSS怎么做? 全家桶:-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: graysca ...
- [css] 如何做图片预览,如何放大一个图片?
[css] 如何做图片预览,如何放大一个图片? 图片不跨域的话用 canvas 来 drawImage 放大裁剪也可以. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
- [css] 除了可以用js跟踪用户信息外,如果不用js,使用纯css怎么做呢?
[css] 除了可以用js跟踪用户信息外,如果不用js,使用纯css怎么做呢? 可以利用 css 的伪类 :hover :active :focus 之类的监听用户行为,然后给指定的url 发送请求. ...
- [css] 使用css如何设置背景虚化?
[css] 使用css如何设置背景虚化? filter: blur(5px); 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关 ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- css 背景图片的虚化
css 背景图片的虚化 背景虚化时出现页面内容也被虚化的情况,使用伪类::before body .bg {position: relative;width: 100%;height: 100%;ov ...
最新文章
- C# 实现将 PDF 转文本的功能
- 【Android 异步操作】HandlerThread 示例 ( 初始化并执行 | 获取Looper | 获取 Handler | 获取消息队列 | 设置空闲队列 | 代码示例 )
- Android如何自定义Gradle插件
- iw命令 linux 没有_linux下ifconfig、iwconfig、iwlist命令详解
- LING与HQL(三)
- ubuntu远程访问摄像头的设置
- ORACLE使用数据泵导入导出部分表
- Java后台通过jxl生成Excel表格
- 网站ddos发包服务器,ddos发包搭建
- 聊天实录:刘静平谈网管员职业规划与技术
- 基于PHP的在线聊天室(网页版)
- VSLAM算法(二):PnP求解 3D-2D 相机位姿及 BA优化算法
- 面向对象 (Oriented-Object)
- python实现列表元素互异
- Ubantu系统中安装360Wifi步骤
- TCP选项之SACK选项概述
- 微博舆情 之 自然语言处理
- Target Team工作任务及签到表(翟超)
- 全球及中国云视频会议解决方案行业研究及十四五规划分析报告
- 小融资 大趋势 小嗨互联网融资研究分析 20190101-20190104
热门文章
- 成都富士康车间爆炸对iPad市场的冲击
- android studio便签需求介绍,便签攻略 - 这里有一份个性便签攻略,喜欢记便签的朋友可不能错过! - Android 应用 - 工具 - 【最美应用】...
- Redis的原子计数器应用
- 802.11协议标准介绍
- python 游戏扫雷_Python游戏:扫雷
- 斯凯孚济南商用车轴承及自调心滚子轴承基地正式投产,服务中国、亚洲乃至全球市场...
- C语言深入解析-关键字
- 【转】iOS游戏/应用的营销及推广技巧(1)
- 超融合集群数据分布原理
- PycUDA --入门