按钮样式

一个立体按钮的样式

基于border属性

width: 50px;
height: 50px;
background: red;
border-top: 3px solid #ff8686;
border-right: 10px solid #ad0000;
border-bottom: 10px solid #af0404;
border-left: 5px solid #ff7878;
border-radius: 15px;

多列等高

父级不设高，子元素等高

基于padding margin

<div style="width:300px;overflow:hidden">
    <div style="background:red;width:100;float:left;padding-bottom:999px;margin-bottom:-999px;"></div>
    <div style="background:blue;width:100;float:left;padding-bottom:999px;margin-bottom:-999px;"></div>
    <div style="background:green;width:100;float:left;padding-bottom:999px;margin-bottom:-999px;"></div>
</div>

43345425452

均分等隙

一个空间被两个空间隔开相同的距离

<div style="box-sizing:border-box;padding:0 5px;overflow:hidden">
    <div style="box-sizing:border-box;margin:0 5px;width:calc(50% - 10px);height:100px;float:left"></div>
    <div style="box-sizing:border-box;margin:0 5px;width:calc(50% - 10px);height:100px;float:left"></div>
</div>

纯CSS 旋转 loading

/* html */
 <div class="an"></div>  

/* css */
@keyframes loader {
  0% {transform:rotate(0deg)}
  100% {transform:rotate(360deg)}
}
.an{
  width:100px;
  height:100px;
  border-radius:50%;
  border:10px solid #f9f9f5;
  border-top:10px solid #36a0f3;
  animation:loader 500ms infinite linear;
}

背景颜色切换显示

{
    -webkit-transition: background-color .5s ease-in;
    -moz-transition: background-color .5s ease-in;
    transition: background-color .5s ease-in;
    background-color: #eee;
}
:hover {
    background-color: #090;
}

水平垂直居中参考

# 水平垂直居中

// 需要宽高,父级有定位
div{
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
}

// 不定宽高 父级有定位
div{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

# 不定宽度的水平居中
div{
    display:table;
    margin:0 auto;
}

去除textarea样式

去除 textarea 的默认样式，如需去除右下角样式，缺一不可

css{
    border:0;
    resize:none;
    outline:none;
    box-shadow:none;
    border-radius:0;
}

阴影模拟标签贴纸

hover 样式要随机应变兼容性：IE9+

div {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
}

div::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-2deg);
    transform-origin: center center;
    box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
    z-index:-1;
}

图片4px像素问题

当一张图片放入一个div中时，div会多出4px像素的高，

这是因为行内元素的基准线的不同

设置图片为块级元素可以解决

<img src="" style="display:block">

或更改对其基准线

<img src="" style="vertical-align:text-top;">

子级突破父级元素

子元素，父元素都不设固定宽,突破父级padding

<div>
  <div style="margin:0 -10px"></div>
</div>

浏览器的最小字体

IE，火狐浏览器最小字体可以到1px
欧朋，谷歌浏览器的最小字体为12px

// 可以通过父级元素放大，在transfrom 缩小来制作字体缩小的效果
.en{
	-webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.90);
}
.an

手机1像素边框太粗

根本原因:1px使用了2dp渲染，解决办法：使用元素替换border，同时scaleY(0.5)

div:before{
    position:absolute;
    top:-1px;
    left:0;
    content:"";
    width:100%;
    height:1px;
    border-top:1px solid #ccc;
    -webkit-transform:scaleY(0.5);
}

Echarts 图表

根据X轴索引值进行分段

option = {
    name:"根据X轴索引值进行分段",
    xAxis: {
        data: ["1", "2", "3", "4", "5", "6", "7"]
    },
    visualMap: [{
        dimension:0,
        show:true,
        pieces: [{
            gt: 0,
            lte: 5,
            color: 'yellow'
        }, {
            gt: 5,
            color: 'blue',
            type: 'dashed',

        }],
    }],
    yAxis: {
        type: 'value',
    },
    series: [{
        type: 'line',
        symbol: 'circle',
        smooth: true,
        data: [10, 40, 74, 83, 120, 146, 180]
    }]
};

CSS 功能参考

伪类获取属性内容

可以用于提示信息（兼容IE8+）

# Html
<div data-msg="不存在的"> hover </div>

# Css
div:hover:after{
    content:attr(data-msg);
}

使用伪类实现分隔

可以用于导航栏分割（兼容IE8+）

# Html
<ul>
    <li>a</li>
    <li></li?
</ul>

# Css
ul > li:not(:last-child)::after {
  content: ",";
}

无需 JS 的VW布局

可以用于不需要兼容第版本的手机页面（不兼容低版本安卓机）

# 750px 手机设计稿
html{
    font-size: 100vw / 750
}

禁止复制页面文字

兼容性：IE5+

<body onselectstart="return false"></body>

*{
   -o-user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

CSS 样式书写顺序

由于存在浏览器前缀这一问题的存在，并伴随着的时代的发展，浏览器在未来会淘汰掉浏览器前缀这一写法，这会导致的页面的问题

.div1 {
    border-radius: 30px 10px;
    -webkit-border-radius: 30px 10px;
}
   // 这两个家伙干的不是同一个活 
.div2{
    -webkit-border-radius: 30px 10px;
    border-radius: 30px 10px;
}

div1

禁止页面事项列表

禁止弹出IE菜单

<body oncontextmenu="return false">

禁止页面选取

<body onselectstart="return false">

禁止鼠标拖拽

<body ondragstart="return false">

IE 条件注释兼容性

由于微软的决策，IE10及以上版本不在支持IE条件注释，所以需要靠第四行代码来实现在IE9以上的浏览器解析为<html>的目的

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]>    <html class="ie7"> <![endif]-->
<!--[if IE 8]>    <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>    <!--<![endif]-->