linux自定义安装php及如何卸载php
2015-08-17 13:58
751 查看
/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/
效果如图。Ps、背景线条是背景图勒,和本文效果无关。。。
html代码如下:
有两种实现方式:
1.box-reflect
(属性详情见http://css.doyoe.com/ 属性→边框→box-reflect)
但是box-reflect属性只有chrome/Safari支持(支持详情见 http://caniuse.com/#search=box-reflect)
FF和Opera不能兼容,所以有了以下替代方案。
2.transform属性的scaleY方式:
受到神飞的博文和MDN的一个Demo源代码的启发
MDN Demo https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch
神飞:一些上流的CSS3图片样式 http://www.qianduan.net/css3-image-styles.html
注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度,否则块过长,导致after的遮罩延长,影响右边没有文字的部分
/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/
效果如图。Ps、背景线条是背景图勒,和本文效果无关。。。
html代码如下:
<div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"><!--其他内容--></div> </div>
有两种实现方式:
1.box-reflect
(属性详情见http://css.doyoe.com/ 属性→边框→box-reflect)
.content h3{ opacity:0.7; font:40px/50px 'Microsoft yahei'; -webkit-box-reflect: below 5px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white)); }
但是box-reflect属性只有chrome/Safari支持(支持详情见 http://caniuse.com/#search=box-reflect)
FF和Opera不能兼容,所以有了以下替代方案。
2.transform属性的scaleY方式:
受到神飞的博文和MDN的一个Demo源代码的启发
MDN Demo https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch
神飞:一些上流的CSS3图片样式 http://www.qianduan.net/css3-image-styles.html
.content h3{ position:relative; float:left; opacity:0.7; font:40px/50px 'Microsoft yahei'; } .content h3:before{ content:attr(title); position:absolute; z-index:1; top:100%; left:0; height:100%; width:100%; -webkit-transform:scaleY(-1); } .content h3:after{ content:''; position:absolute; z-index:2; top:100%; left:0; height:100%; width:100%; background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/ } .content .next{ clear:both; padding:60px; }
注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度,否则块过长,导致after的遮罩延长,影响右边没有文字的部分
/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/
相关文章推荐
- linux常用操作汇总
- Linux日志分析常用命令
- GUN/LINUX 用户和组 文件权限管理
- CentOS系统下的Hadoop集群(第1期)_CentOS安装配置
- Linux进程的实际用户ID和有效用户ID
- centos7.0安装配置DRBD
- F.lux——自动调整屏幕亮度与颜色,降低蓝光
- linux数据流重定向
- linux 生名变量类型 declare
- linux 中各引号的作用
- linux下的环境文件设置说明
- linux目录结构
- Linux Socket Errno错误代码列表以及常见错误
- centos下载
- linux( 二)
- Linux启动新进程的几种方法及比较
- Linux下vim命令
- Linux进程间通信——使用命名管道
- linux(一)
- linux系统的开机流程