css 收集

1.边框透明


  border: 10px solid hsla(0,0%,100%,.5);
  background: white;
  background-clip: padding-box;


2.仿单选多选框


  未选中状态
  input[type="checkbox"] + label span,
  input[type="radio"] + label span {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    border: 2px solid #888;
    border-radius: 10px;
    background: radial-gradient(#eee, #aaa);
  }
  /* we want the radio buttons to be circular */
  input[type="radio"] + label span  {
    border-radius: 50%;
  }


  选中状态
  input[type="checkbox"]:checked + label span::before {
   content: "√";
   color: deepPink;
   text-align: center;
   font-size: 40px;
  }


  input[type="radio"]:checked + label span {
    background-image: radial-gradient(#FF5ABA, deepPink);
  }  




3.清除浮动


  clearfix父元素::after {
    content:"";
    display:table;
    clear:both;
  }






4.垂直剧中


  （已知父元素高度下）
  .flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
  }
  （使用transform剧中；第一段是消除当像素有0.5这样的只出现产生的模糊）
  .parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }


  .element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  （最简单的剧中）
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }


5.srcset根据需求加载不同的图片


  （先只支持谷歌）
  <img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />
 （480W为宽度）


6.动画针steps


  (55就是分55针)
  transition: background 1s steps(55);


7.当按钮点击后触发


  input[type="radio"]{
    &[id="men"]:checked {
    ｝
  ｝


8.解决新版UC字体变大


  在body下面写个空的<secent><header><footer>标签就可以了
  <meta name="wap-font-scale" content= "no">


9.文字边框
  -webkit-text-stroke: 2px white