css3笔记

//圆角效果
border-radius:0 0 0 0;
//阴影
box-shadow:0 0 0 #fff;
box-shadow:0 0 0 #fff inset;
//边框应用图片
border-image:url() 0 round平铺/repeat重复/strech拉伸;
//颜色透明
color:rgba(0,0,0,0.8);
//渐变色彩
background-image:linear-gradient(to top/从下到上,top right/从左到右，to bottom/从上到下，top left/从右到左，to top left/右下角到左下角，to top right/左下角到右上角，#fff,#000,red,blue);
//省略标记...
text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;
//嵌入字体
@font-face {
    font-family: "MOOC Font";
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
//文字阴影
text-shadow:0 0 0 #fff;
//设置元素背景图片
background-origin:border-box|padding-box|content-box;
//背景图片大小
background-size:auto/px/%/cover/contain;
//多个背景
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
           url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
           url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
//属性选择器                                  class^-------------href$--------------title*
<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="#" class="icon">我类名是icon</a>

<a href="#" title="我的title是more">我的title是more</a>
a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}
//否定选择器    :not
form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}
//空选择器     empty
div/p/span/a:empty{display:none;/加样式}
//目标选择器        ：target
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>
.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

//元素第一个子元素//元素最后一个子元素
first-child
last-child
div,p,span,li:first-child/:last-child
//定位父元素的一个或者多个特定的子元素             nth-child(n)
:nth-child(2n)偶数
:nth-child(2n+1)奇数
//从父元素的最后一个子元素开始计算             nth-last-child(n)
nth-last-child(5)
//禁用input       :enabled
input[type="text"]:enabled{}
//不可用输入框    :disabled
input[type="text"]:disabled{}