-----------------------------------------------------------------------------------------------

CSS隱藏多余文字為...

　text-overflow : clip | ellipsis 

　　参数：clip : 简单的裁切
          　　ellipsis : 　当对象内文本溢出时显示省略标记（...）
　　说明： 请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

white-space:nowrap;
overflow:hidden;
text-overflow :  ellipsis ;

overflow: hidden;
white-space: nowrap;
text-overflow: clip|ellipsis|string;

-----------------------------

<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示
 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” /> 
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">


<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明： 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码 

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

------------------------------------------------------------

上海-日常(865316484)  9:47:32

请问这样的页面，当中的全透明，边上半透明，布局有什么思路吗。。。
西安-NS<964089199>  9:49:40
box-shadow就可以

.cover::before {
    content: ‘‘;
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    /* 自己瞎填的参数，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

<div class="cover"></div>

var coverGuide = function(cover, target) {
    var body = document.body, doc = document.documentElement;
    if (cover && target) {
        // target size(width/height)
        var targetWidth = target.clientWidth,
            targetHeight = target.clientHeight;

        // page size
        var pageHeight = doc.scrollHeight,
            pageWidth = doc.scrollWidth;
        
        // offset of target    
        var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
        
        // set size and border-width
        cover.style.width = targetWidth + ‘px‘;
        cover.style.height = targetHeight + ‘px‘;    
        cover.style.borderWidth = 
            offsetTop + ‘px ‘ + 
            (pageWidth - targetWidth - offsetLeft) + ‘px ‘ +
            (pageHeight - targetHeight - offsetTop) + ‘px ‘ + 
            offsetLeft + ‘px‘;
        
        cover.style.display = ‘block‘;
            
        // resize
        if (!cover.isResizeBind) {
            if (window.addEventListener) {
                window.addEventListener(‘resize‘, function() {
                    coverGuide(cover, target);
                });    
                cover.isResizeBind = true;
            } else if (window.attachEvent) {
                window.attachEvent(‘onresize‘, function() {
                    coverGuide(cover, target);
                });
                cover.isResizeBind = true;                
                // IE7, IE8 box-shadow hack
                cover.innerHTML = ‘<img src="guide-shadow.png">‘;
            }
        }
    }
};

-------------------------------------------------------------------------

css生成三角形

 

1 2 3 4 5 6 7

#triangle-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid red; }

　　 

Triangle Down

 

 

1 2 3 4 5 6 7

#triangle-down {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-top: 100px solid red; }

　　 

Triangle Left

 

 

1 2 3 4 5 6 7

#triangle-left {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-right: 100px solid red;     border-bottom: 50px solid transparent; }

 

Triangle Right

 

 

1 2 3 4 5 6 7

#triangle-right {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-left: 100px solid red;     border-bottom: 50px solid transparent; }

 

Triangle Top Left

 

 

1 2 3 4 5 6

#triangle-topleft {     width: 0;     height: 0;     border-top: 100px solid red;     border-right: 100px solid transparent; }

 

Triangle Top Right

 

 

1 2 3 4 5 6 7

#triangle-topright {     width: 0;     height: 0;     border-top: 100px solid red;     border-left: 100px solid transparent;   }

 

Triangle Bottom Left

 

 

1 2 3 4 5 6

#triangle-bottomleft {     width: 0;     height: 0;     border-bottom: 100px solid red;     border-right: 100px solid transparent; }

 

Triangle Bottom Right

 

    <style>

.demo_line_01 {
    width: 200px;/*这指的是文字的宽度*/
    padding: 0 20px 0;
    margin: 20px auto;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
  }

 .demo_line_02 {
    width:100%;/*这指的是整个行的宽度*/

    margin:0 auto;
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span {
    position: relative;
    top: -10px;
    background: #666;/*背景可改为白色*/
padding: 0 20px;
 }
</style>
</head>
<body>
  <div class="demo_line_01">分割线 </div>
  <div class="demo_line_02"><span>分割线</span></div>
</body>

-----------------------------------------------------------------------------------

CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)

移动端页面时学到了很多CSS3的有用属性，其中有一个印象比较深刻的属性：-webkit-tap-highlight-color

参见 http://css-infos.net/property/-webkit-tap-highlight-color

这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。

例如在Adnroid版本的微信中，点击a标签时将会出现一个橙色的小框表示点击的响应。

此时，如果对元素设置了tap-highlight-color值，例如:

-webkit-tap-highlight-color: rgba(240,240,240,0.7);

则可改变元素被点击时背景框的颜色。

如果需要背景框不显示，则可以将rgba中的alpha值设为0即可，例如-webkit-tap-highlight-color : rgba(0,0,0,0);

另外还有一个设置选中文字颜色的方法。

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式：

::selection             { background:#FFF; color:#333; }
::-moz-selection    { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}

如果要去掉选中时的颜色，把background都置为none就行了。

css3属性  -webkit-font-smoothing

CSS3里面加入了一个“-webkit-font-smoothing”属性，可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！

它有三个属性： 

none                                     ------ 对低像素的文本比较好 

subpixel-antialiased                ------默认值 

antialiased                             ------抗锯齿很好 

例子： 

body{ 

   -webkit-font-smoothing: antialiased; 

} 

国外某网站例子

附：-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用，特别是图标文字流行的今天。

--------------------------------------------------------

2016.1.8 

rem特点 

        rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

p {font-size:14px; font-size:.875rem;}

.css(‘backgroundColor‘,‘transparent‘)

ellipse,椭圆形圆角border-radius

border-radius：50% / 100% 100% 0 0；

border-radius：100% 0 0 100% / 50%

border-radius：100% 0 0 0；

clip-path : polygon(50% 0,100% 50%；50% 100%。0 50%)

1/4的椭圆

css中的连字符- ，js不认识，所有需要改成第二个单词 的首字母大写，如borderLeftWidth

.clear_f {clear: both;overflow: hidden;height: 0;}