标签 css 下的文章

手机点击图片显示蓝色区域 bootstrap点击阴影modal模态框不消失

*{
    -webkit-tap-highlight-color: rgba(255,0,0,0);
    -webkit-appearance:none;
}

//在样式里面加个这个就会没有蓝色的区域

bootstrap点击阴影模态框不消失

  1. 模态框添加data-backdrop="static"
  2. 调用 $("#myModal").modal({backdrop:'static',keyboard:false});
    backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。
    keyboard 为 false 时，按下 Esc 键不会关闭 Modal。

css3二维码扫描动画效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>css3二维码扫描动画效果</title>
    <style type="text/css">
        .scan-box{
            width: 200px;
            height: 200px;
            background: url('http://project.icphp.com/assets/images/icecry613.jpg');
        }
        .scan{
            animation-name: saoma;
            -webkit-animation-name: saoma;
            animation-duration: 5s;
            -webkit-animation-duration: 5s;
            animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

            width: 200px;
            height: 200px;
            position: absolute;
            top: -225px;
            background: rgba(26, 132, 190, 0.3);
            border-bottom: 3px solid #4AB86A;
        }
        @keyframes saoma{0%{top:-205px;}100%{top:0;}}
        @-webkit-keyframes saoma{0%{top:-205px;}100%{top:0;}}
        @-moz-keyframes saoma{0%{top:-205px;}100%{top:0;}}
    </style>
</head>
<body>
    <div class="scan-box">
        <div class="scan"></div>
    </div>
</body>
</html>

删除网页没用到多余的css样式

很多时候使用第三方模板会产生很多无用的css样式，如果比较在意可以使用下面方法尝试处理。
1.firfox安装插件dust-me-selectors
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

2.chrome直接运行开发者工具 Audits 选项，选中audit present state点击run即可

3.在线工具
http://gtmetrix.com/remove-unused-css.html
https://unused-css.com/

4.其他

但需注意，通常一个样式表会在不同页面同时使用，如果依据一个页面的分析删除了未使用的样式，那你该呵呵了~

CSS实现弹窗背景半透明效果

IE:
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
非IE:
background-color: rgba(0, 0, 0, 0.2);
兼容:
background-color: rgb(0, 0, 0);
filter: alpha(opacity=20);
background-color: rgba(0, 0, 0, 0.2);

1.弹出框默认状态下是隐藏的，当点击弹出按钮时，显示该弹出框，如下：
<div class="modal" style="display: none;"></div>
2.控制弹出框显示的遮罩层CSS(遮罩整个屏幕，即添加一个灰色背景遮罩层)如下：

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    background-color: rgb(0, 0, 0);  
    filter: alpha(opacity=60);  
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 9999;
}

Flex 布局基础

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Webkit内核的浏览器，必须加上-webkit前缀。

bg2015071003.jpg

- 阅读剩余部分 -

css各种手型集合(css禁止手型)

比较齐全的鼠标手型css

.auto { cursor: auto; }
.deafult { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }

Font字体小图标应用

我们知道在页面上载入小图标有多种方式，比如我们使用比较多的是css sprite背景图片定位，就是将很多小图标集成到一张大图，然后使用CSS定位背景。还有一种比较现代的方式是使用font字体图标，它利用@font-face原理载入图标字体库，然后调用图标。

- 阅读剩余部分 -

  1. 1
  2. 2