实现边框透明，安卓手机头像圆形不识别%；利用样式实现”>“符号，以及tips符号的实现方法，以及粘性定位position:sticky用法

如下图要实现边框是透明的情况：

透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

上面的几个属性分别是:

• opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
• filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
• -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
• -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

CSS透明度继承问题

但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度。

所以比较好的解决方法是：background: rgba(255,255,255,.3)

RGBa是一种在CSS中声明包含透明效果的颜色的方法，通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素

CSS3 颜色值RGBA表示方式

说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

说明：

RGBA(R,G,B,A)

取值：

R：

红色值。正整数 | 百分数

G：

绿色值。正整数 | 百分数

B：

蓝色值。正整数 | 百分数

A：

Alpha透明度。取值0~1之间。

安卓和一些老版的浏览器内核不识别%号，如果所以border-radius:50%是不成功的，但是可以利用外面加一个Div然后把border-radius:***设置大数字，overflow:hidden来实现！然后问题又来了，老版本的安卓4.1.1的系统不识别：border: 10px rgba(255, 255, 255, 0.9) solid; 但是识别：box-shadow，既然这样，又要做出头像多边的情况，故叠加多个box-shadow，代码如下：

.userperpic{width:100%; height:180px; padding-top: 60px; padding-bottom: 30px;background:#FF6666; text-align:center;}
.userperpic .userimg{border-radius:10000px;webkit-border-radius:10000px; -moz-border-radius:10000px; width: 120px; margin-top: -20px;margin-bottom: 10px;height: 120px;box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.9), 0px 0px 0px 20px rgba(255, 255, 253, 0.3), 0px 0px 0px 0px rgba(249, 249, 249,1) inset; overflow: hidden;display: inline-block;}
.userperpic img{width:120px; height:120px;}

接下来再说明一下，上面的我的订单“右边的”>“符号实现方法：

下面我有介绍 trips 弹出图的制作，很多时候我们需要做上图的向右“>”键头，这里也把项目中的效果分享一下，其实也主要用到的: position、:after、transform、border,border-width等相关属性

详细代码如下：

ul.link-list{width: 95%;margin: 0 auto;list-style: none;background: #FFF;border-radius: 5px;border: 1px #CCCCCC solid;margin-top: 5px;}

ul.link-list>li{list-style: none;}

ul.link-list>li{color: #4d4d4d;position: relative;list-style: none;}

nav.u-links .link-list li a{padding-left:30px;}

nav.u-links .link-list li a:after{top: 15px;left: 20px;width: 5px;height: 5px;content: '';position: absolute;transform: rotate(0deg);-webkit-transform: rotate(0deg);border: #646464 solid;border-width: 1px;background: #646464;} /* 这一块是文字前面的正方形实心点 */

nav.u-links .link-list li.border{border-bottom: 1px solid #ccc;}

nav.u-links .link-list li.liAfter{padding: 10px 28px 10px 10px;border-bottom: 1px #CCCCCC solid;}

nav.u-links .link-list li.liAfter:last-child{border-bottom:none;} /* 这一块是右边的向右>图标 */

nav.u-links .link-list li.liAfters:after{top: 17px;right: 18px;width: 10px;height: 10px;content: '';position: absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);border: #646464 solid;border-width: 1px 1px 0 0;}

nav.u-links .link-list li.liAfter:after{top: 13px;right: 18px;width: 10px;height: 10px;content: '';position: absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);border: #646464 solid;border-width: 1px 1px 0 0;}

nav.u-links .link-list li span{width:88%;display: block;line-height: 24px;color: #222;font-size: 16px;font-weight: bold;cursor: pointer;padding: 10px 0px 10px 10px;}

nav.u-links .link-list i{background: url(../images/shopDetail.png) no-repeat 10px 0;background-size: 22px;width: 38px;height: 45px;display: inline-block;float: left;overflow: hidden;clear: both;}

nav.u-links .link-list .info{background-position-y:7px;}

nav.u-links .link-list .subscription{background-position-y:-31px;}

nav.u-links .link-list .speak{background-position-y:-67px;}

nav.u-links .link-list .credits{background-position-y:-100px;}

下面再用tips符号实现一下下面的样式：

tips诸多样式的下载地址：

http://pan.baidu.com/s/1eQtOjEa

这里顺带上一个table-cell的剧中效果：

如上图，通过三个元素实现的，即是：左右分别为图标，中间为文字，主要还是用到了table流，table-cell、vertical-align:middle;，以及在第二个span标签里面用了width:100%;

粘性定位position:sticky用法

用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。

position:sticky用法

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

使用起来也非常简单：

.sticky {

  position: -webkit-sticky;  position:sticky;  top: 15px;}

目前来说还需要用私有前缀～～

浏览器兼容性：

由于这是一个全新的属性，以至于到现在都没有一个规范，W3C也刚刚开始讨论它，而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。

另外需要注意的是，如果同时定义了left和right值，那么left生效，right会无效，同样，同时定义了top和bottom，top赢～～

fall back

虽然其它浏览器尚不支持，但是实现起来其实不难，我们可以用js简单实现：

HTML

<div class="header"></div>

CSS

.sticky {  position: fixed;  top: 0;}.header {  width: 100%;  background: #F6D565;  padding: 25px 0;}

JS

var header = document.querySelector('.header');var origOffsetY = header.offsetTop; function onScroll(e) {  window.scrollY >= origOffsetY ? header.classList.add('sticky') :                                  header.classList.remove('sticky');} document.addEventListener('scroll', onScroll);

demo

嗯，对于前端来说，新技术用于提升用户体验才能体现其价值～～

原文地址：http://www.qianduan.net/position-sticky-introduction.html

当然也可以用Jquery插件实现：http://www.jq22.com/jquery-info518