CSS样式积累

学习的路还很长，注意积累
一、标题h

h1 {
font-family: 'Segoe UI Semibold';
font-weight: 400;
font-size: 3.5em;

h3 {
font-family: 'Segoe UI Light';
font-weight: 100;
font-size: 1.75em;
}

二、背景

1.背景铺满：css3新增

background-size: cover;

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。适用于父类容器上，该行的子元素将相互对齐并在行中居中对齐

justify-content: center;

2.CSS3透明度：opacity，IE8 以及更早的版本支持替代的 filter 属性。例 如：filter:Alpha(opacity=50)。

div  {  opacity:0.5; }

Opacity属性设置一个元素了透明度级别。
默认值：    1
继承： no
版本： CSS3
JavaScript 语法：  object.style.opacity=0.5

三，样式
圆角：

-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响

四，复选框自定义样式
HTML代码

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form> 

css代码

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}
.wrapper {
  margin-bottom: 10px;
}
.box {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  background: orange;
  vertical-align: middle;
  border-radius: 100%;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}

.box span { 
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  background: #fff;
  top: 50%;
  left:50%;
  margin: -5px 0  0 -5px;
  z-index:1;
}

input[type="radio"] + span {
  opacity: 0;

}
input[type="radio"]:checked + span {
  opacity: 1;
}

效果：

五：弧线阴影

<div class="box effect">

CSS：

.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
    position:absolute; 
http://www.imooc.com/learn/240  z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

效果：