css3新增选择器

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效（阴影）、多栏布局（display:flex）、2D3D和动画等模块

CSS选择器

​选择器	​例子	​例子描述	​****CSS
.**class	.intro	选择 class="intro" 的所有元素。	1
#**id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
**element	p	选择所有元素	1
**element,**element	div,p	选择元素	1
element element	div p	选择 元素	1
element>element	div>p	选择父元素为元素	2
element+element	div+p	选择紧接在元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。 （class=”flower red”） （title= ”flower red”） 不能使用了	2
[attribute|=value]	[class|=box]	选择 class 属性值以 “box” 开头(后面如果有字符，必须为-)的所有元素。	2

:link （：开头--伪类选择器）	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。（IE8及以上才支持）	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。（加边框不行，字号可以）	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before （伪元素）	p:before	在每个元素的内容之前插入内容。	2
:after（伪元素）	p:after	在每个元素的内容之后插入内容。	2

选择器	例子	例子描述	CSS
element1~element2	p~ul	选择前面有元素(同胞，可以不相邻)的每个	3
[**attribute^=**value]	a[href^="https"]	选择其 href属性值以 "https" 开头的每个 元素。	3
[**attribute$=**value]	img[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 元素。	3
[attribute=value]	img[src *="abc"]img[src *="abc"]	选择其 src 属性中包含 "abc" 子串的每个 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2n+1)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3

边框圆角

border-radius 表示边框圆角，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。

div{
    border-radius:10px;     /* 所有角都使用半径为10px的圆角 */
     border-radius:10px 5px;   /*左上，右下10px,   右上，左下5px*/
    border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 
}

 盒子阴影

box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需的。水平阴影的位置。允许负值

v-shadow：必需的。垂直阴影的位置。允许负值

blur：可选。模糊程度

spread：可选。阴影的宽度

color：可选。阴影的颜色

inset：可选。从外层的阴影（outset）改变阴影内侧阴影

案例：伪元素翘脚阴影效果

<style>
  .box11 {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px auto;
  }

  /* 添加盒子内阴影 */
  .shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),
      0px 0px 20px rgba(0, 0, 0, 0.1) inset;
  }

  /* 添加盒子下面阴影 */
  .shadow::before,
  .shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    /* box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3); */
    transform: rotate(-3deg);
  }

  /* 将阴影进行反转 */
  .shadow::after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
  }
</style>
<div class="box11 shadow"></div>

 文字阴影

text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

语法：text-shadow: h-shadow v-shadow blur color; h-shadow：x轴偏移 v-shadow：y轴偏移 blur：模糊程度 color：模糊颜色

立体凸起效果

<style>
  .p3{
    text-shadow: -1px -1px white,1px 1px #333;
    color:#D1D1D1;
    font-weight: bold;
    background: #CCC;
  }
</style>
<p class="p3">立体凸起效果</p>

立体凹陷效果

<style>
.p4{
    text-shadow: 1px 1px white,-1px -1px #333;
    color:#D1D1D1;
    font-weight: bold;
    background: #CCC;
    font-size: 24px;
}
</style>
<p class="p4">立体凹下效果</p>

 描边效果

<style>
.p5{
    text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black;
    color:#ffffff;
    background: #CCC;
}
</style>
<p class="p5">描边效果</p>

 外发光效果

<style>
.p6{
  text-shadow: 0 0 0.2em #F87,0 0 0.2em #f87;
  color:#d1d1d1;
  background: #CCC;
  }
</style>
<p class="p6">外发光效果</p>

 背景图片的大小

background-size可以设定背景图像的尺寸；

语法格式： background-size: length | percentage | cover | contain;

length：该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的

percentage：该属性是以父元素的百分比来设置图片的宽度和高度的

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（按照原图片的比例，扩展至足够大使图片完全覆盖整个背景区域）

content：背景图片保持原来的大小；把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域

auto：背景图片保持原来的大小；

  背景渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义

参数值：

linear-gradient  线性渐变

radial-gradient  径向渐变

repeating-linear-gradient  重复的线性渐变

repeating-radial-gradient  重复的径向渐变

 径向渐变

语法：background: linear-gradient(direction[方向] / angle[角度], color-stop1[颜色], color-stop2[颜色], ...);

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

效果一：添加默认渐变(默认情况下从上往下渐变)

<style>
  div{
    width: 300px;
    height: 100px;
  }
  #grad {
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法 */
  }
</style>
<div id='grad'></div>

 

使用角度渐变 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。 

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

<style>
  div{
    width: 300px;
    height: 100px;
  }
  #grad {
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法 */
  }

</style>
<div id='grad'></div>

注意：在标准浏览器和谷歌浏览器下的不同效果 background:-webkit-linear-gradient(30deg,red ,green,blue); 和 background:linear-gradient(30deg,red ,green,blue);的效果是不一样的； 两个效果呈现互余的情况；如果想要两个效果一致，需要给正常浏览器下的效果改为 background:linear-gradient(60deg,red ,green,blue);

-webkit-和正常版本下的角度是互余关系

 背景图开始位置

background-origin背景图片从什么位置开始填充

background-origin: padding-box|border-box|content-box; padding-box 背景图像从内边距左上角开始填充（默认值） border-box 背景图像从边框左上角开始填充 content-box 背景图像从内容左上角开始填充

注意：给背景图片设置位置时，一定要添加no-repeat；并且开始的范围不能比结束的范围大

<style>
  div{
    width: 1000px;
    height: 600px;
    margin:0 auto;
    border: 20px dotted #f00; /*虚线*/
    padding:50px;
    background: url(banner.jpg) no-repeat; /* 背景 */
    background-origin: content-box; /* 按照内容进行平铺 */
  }
</style>
<div></div>

 背景图裁切

语法：background-clip: border-box|padding-box|content-box|text;

注意：如果想要使用background-clip: border-box必须先设置background-origin: border-box；不然不生效，因为background-origin默认值为padding-box

案例一：普通背景图片裁切

<style>
div{
    width: 1000px;
    height: 600px;
    margin:0 auto;
    border: 20px dotted #f00; /*虚线*/
    padding:20px;
    margin:20px;
    background: url(banner.jpg) no-repeat; /* 背景 */
    /* background-origin: border-box; */
    background-clip: content-box;
}
</style>
<div></div>

案例二：文本裁切

<style>
body{
  /* 添加整体的背景颜色 */
  background-color: #000;
}
div{
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  text-align: center;
  /* font：粗细 字体大小/行高 字体样式 */
  font:bold 155px/400px "simhei";
  border: 20px solid #ccc;
  /* 必须添加背景图片，否则看不出来效果 */
  background: url("banner.png");
  color: rgba(255,0,0,0.2);
  /* 裁剪：按照文字来进行裁剪 必须添加-webkit- 兼容问题 */
  background-clip: text;
  -webkit-background-clip: text;
}
</style>
<div>
  你本来就很美
</div>

案例三：光斑效果

<style>
div{
width: 1000px;
height: 600px;
margin:0 auto;
background: 
-webkit-linear-gradient(left,
rgba(255,0,0,0),
rgba(255,0,0,1),
rgba(255,0,0,0)
);
}
</style>
<div></div>

案例四：文本裁切 + 光斑效果，实现鼠标悬浮高亮显示

<style>
  body {
    background:#000;
  }
  div {
    margin:10px auto;
    width:800px;
    height:300px;
    border:40px solid rgba(255,255,255,0.5);
    font: 900 110px/300px "simhei";
    color:rgba(255,255,255,0);
    text-align: center;
    /* 还可以不添加背景图片 */
    background: 
      linear-gradient(90deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,1) 100px,
        rgba(255,255,255,1) 110px,
        rgba(255,255,255,0) 120px
      ) 0px 0px no-repeat,url('../images/1.jpg');
    -webkit-background-clip: text;
    /* 过渡到鼠标悬浮的效果 */
    /* 如果鼠标悬浮离开都需要过渡，只在没有悬浮的div中添加就可以 */
    transition: 2s;
  }
  div:hover {
    /* 第一个表示光斑的过渡，第二个是背景图片的过渡 */
    background-position: 900px 0px,0 0;
  }
</style>
<body>
  <div>这个杀手不太冷</div>
</body>