CSS3新特性

CSS3的特性那么多该从哪里说起了？很显然这道题目是有陷阱的，你不可能将所有的特性一个不漏的说
出来，就算你说出来，别人还认为你是背的了！所以你主要讲一下在项目中经常用到的Css3的属性就可以   
，以第一人称来回答这个问题，例如：在我们的项目中经常用CSS3中的XX属性来实现XX特效。

一、圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

由浮点数字和单位标识符组成的长度值。不可为负值。各种长度单位都可以：px，%

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

具体的原理见此处

代码实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{margin:0;}
        ul{margin:0; padding:0;}
        li{list-style:none;}
        .clearfix:before,.clearfix:after{display:table; content:"";}
        .clearfix:after{clear:both;}
        .clearfix{*zoom:1;}
         div{
            float:left;
        }
        #div0{
            /* 做环形，只要在圆的基础上加一个border即可 */
            width:100px;
            height:100px;
            background-color: yellow;
            border: 80px solid red;     /* border的宽度可以随意设置，都是环形,只是环的宽度不同*/
            border-radius:50%;
        }
        #div1{ 
        /*把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半*/
        width:100px;  
        height:100px;  
        background-color:yellow;  
        border-radius:50px 50px 50px 50px;  
        }  
        #div2{
            width:100px;  
            height:50px;  
            background-color:yellow;  
            border-radius:50px 50px 0px 0px;  
        }
        #div3{
            width:200px;  
            height:100px; 
            background-color: blue;
            border-radius: 100px/50px;
        }
        #div4{
            /* 使用transform和rotate相结合，使两个正反三角形上下显示。 */
             width: 100px;  
            height: 100px;  
            background: #8e00ff;  
            /* Rotate */  
            -webkit-transform: rotate(-45deg);  
            -moz-transform: rotate(-45deg);  
             -ms-transform: rotate(-45deg);  
            -o-transform: rotate(-45deg);  
             transform: rotate(-45deg);  
            /* Rotate Origin */  
            -webkit-transform-origin: 0 100%;  
            -moz-transform-origin: 0 100%;  
            -ms-transform-origin: 0 100%;  
            -o-transform-origin: 0 100%;  
            transform-origin: 0 100%;  
            margin: 40px 0 10px 240px;  
        }
        #div5{
            /* 宽度和高度设置为0，border设置左，右边透明，底边可见Solid。 */
             width: 0;  
            height: 0;  
            float: left;  
            border-bottom: 100px solid #fcf706;  
            border-left: 50px solid transparent;  
            border-right: 50px solid transparent;  
        }
    </style>
</head>
<body>
    <div id="all clearfix">
        <div id="div0">
        </div>
        <div id="div1">实心圆</div>
        <div id="div2">半圆</div>
        <div id="div3">椭圆</div>
        <div id="div4">菱形</div>
        <div id="div5">三角形</div>
    </div>
</body>
</html>

更多图形绘制看这里

三角形的绘制

原理剖析见这里

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
*{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    color:#000;
}
body{margin:0;}
ul{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none; color:#000;border:0;}
a:link{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}
#rect{
    width: 100px;  
    height: 100px;  
    border:2px solid #000;   //左边的矩形框  
     position: relative;  
}

#rect:before,#rect:after{  
    content: ' ';  
     position: absolute;  
     left: 10px;
     border: solid transparent;    //伪元素设置为透明框  
}  
 #rect:after{  
    width: 0px;  
    height: 0px;  
    top:22px; 
    left:98px; 
    border-width: 8px;  
    border-left: 8px solid  #fff;    //after元素，左三角形，白色，小三角形，会遮盖before元素  
}   
#rect:before{  
    width: 0px;  
    height: 0px;  
    top:20px; 
    left:98px; 
    border-width: 10px;  
    border-left: 10px solid #000;  //黑色大左三角形，被白色覆盖一部分，正好剩下2px的边  
}  
</style>
<body>
    <div id="rect">
        <!-- 总结：边框为2px,两个伪元素宽度差2px,纵向位移差2px -->
    </div>
</body>
</html>

二、阴影

box-shadow是向盒子添加阴影。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

①如果添加多个阴影，只需用逗号隔开即可。如：

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

②阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

③.X轴偏移量和Y轴偏移量值可以设置为负数

 x轴正值：阴影在右边右侧，反之，左边左侧 
 y轴正值：阴影在下边下侧，反之，上边上侧

CSS3边框为边框应用图片 border-image

顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似

repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。  

Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）  

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远

CSS3颜色颜色之RGBA

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

  color：rgba(R,G,B,A)

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

三、CSS3变形

transform（重点）

transform 的属性有以下几类

①translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离。
②scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定义元素的缩放比例。
③rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。
④skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定义元素的倾斜角度。

可以认为电脑屏幕中心是原点，原点往右就是X轴正方向，往下就是Y轴正方向，往屏幕前方（也就是往人脸）的方向就是Z轴的正方向了

（A）transform-style指定嵌套元素如何在3D空间中呈现。
transform-style: flat | preserve-3d

flat是默认值，表示所有子元素在2D平面呈现；preserve-3d表示所有子元素在3D空间中呈现。

（B）transform-origin用来改变元素的原点位置。

transform-origin:center（默认值，等价于：center center/ 50% 50%）—–（几何中心）
transform-origin:top（等价于：top center/center top）——（上边中）
transform-origin:bottom（等价于：bottom center/center bottom）——（下边中）
transform-origin:right（等价于：right center/center right）—–（右边中）
transform-origin:left（等价于：left center/center left）—–（左边中）
transform-origin:top left（等价于：left top）——-（左上角）
同理，还可以设置为：transform-origin:top right（右上角为原点）、transform-origin:bottom right（右下角为原点）、transform-origin:bottom left（左下角为原点）

perspective属性———-透视，视角！该属性用来激活一个3D空间

当为元素定义perspective属性时，其子元素都会获得透视效果（使用了3D变换的元素）。所以一般来说perspective属性都应用在父元素上，我们可以把这个父元素称为舞台元素。

另外，perspective的取值也一直是个谜，经过我的多次查阅和测试，得出了一下几个结论：

取值为none或不设置，就没有3D空间。
取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
貌似当取值为元素的宽度时，视觉效果比较好。

(1)旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

transform: rotate(45deg);

旋转方向（3D）

①rotateX（正值）：站在X轴正方向上顺时针旋转 
②rotateY(正值)：站在Y轴正方向上顺时针旋转  
③rotateZ(正值)：站在Z轴正方向顺时针旋转

(2)扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

  ①skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）

   ②skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

  ③skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）

(3)缩放 scale()

缩放 scale()函数让元素根据中心原点对对象进行缩放。

 ① scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

      ②scaleX(x)元素仅水平方向缩放（X轴缩放）

      ③scaleY(y)元素仅垂直方向缩放（Y轴缩放）

注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

(4)位移 translate() —–重点

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

  ①translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）----正值默认向右向下   
  ②translateX(x)仅水平方向移动（X轴移动）   
  ③translateY(Y)仅垂直方向移动（Y轴移动）

用法：令不知道宽度和高度的元素，水平居中和垂直居中

四.CSS3中的动画

(1)过渡属性 transition-property

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果。

（2）过渡所需时间 transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

（3）过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

（4）过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

总结：transition属性
transition: all .28s ease-in .1s;

动画的执行方面和设置

(1)调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

(2)设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

(3)设置动画播放方式

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。

(4)设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

(5)设置动画播放次数

animation-iteration-count属性主要用来定义动画的播放次数。如果取值为infinite，动画将会无限次的播放。

(6)设置动画播放方向

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

(7)设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。
其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

(8)设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

总结（重点了解）：translate，transform，translation，anmiation的区别

1.translate:translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动
2.transform:静态属性！只要写进style里就会直接显示生效，不会出现动画过程。**通过使用transform属性，能够对元素进行移动（translate）、缩放（scale）、旋转（rotate）、翻转（skew）
3.translation:允许CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点等
4.animation:关键帧 keyframe 实现自定义动画，通过对关键帧的设定来实现，也就是规定从起始点（0%）到终点（100%）之间的具体节点上的动画样式。animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

五、渐变(了解)

详细实例参考这里

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

（一）线性渐变

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

从上到下的渐变

#grad1 {
    height: 200px;
    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); /* 标准的语法（必须放在最后） */
}

从左到右的线性渐变：(注意不同浏览器对应的起点位置)------起点是红色，慢慢过渡到蓝色：

        #grad {
          background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
          background: linear-gradient(to right, red , blue); /* 标准的语法 */
        }

对角渐变

#grad { 
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ 
}

使用角度

（二）径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。
同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是    
center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner   
（表示到最远的角落）。

background: radial-gradient(center, shape size, start-color, …, last-color);

#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

六、选择器补充（重点）

结构型伪类

E:nth-child(n) 表示E父元素中的第n个子节点，且类型为E——先找个数，再找类型
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
E:nth-last-child(n) 表示E父元素中的第n个子节点，从后向前计算，且类型为E
E:nth-of-type(n) 表示E父元素中的第n个E子节点，:nth-of-type能够从指定类型的子元素开始计数，只按照E计数，其他忽略
E:nth-last-of-type(n)表示E父元素中的第n个E子节点，从后向前计算
E:empty 表示E元素中没有子节点。注意：包含文本节点
E:first-child 表示E父元素中的第一个子节点，且类型为E
E:last-child 表示E父元素中的最后一个子节点，且类型为E
E:first-of-type 表示E父元素中的第一个E子节点
E:last-of-type 表示E父元素中的最后一个E子节点
E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点
E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

总结：操作的元素为子节点，存在多层父子结点时，要逐级下找。nth-child(n)先找个数，再找类型，:nth-of-type能够从指定类型的子元素开始计数只按照E计数，其他忽略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    div p,div div{ margin:0;height:30px; margin-bottom:5px; background-color:#ccc;}
    div:nth-of-type(2) p:nth-child(2){background-color: chartreuse} //橄榄绿
    div:nth-of-type(1) p:nth-child(1){background-color: blue}
    div:nth-child(1) div:nth-child(2){background-color: aqua}  //水色
    div:nth-child(2) div:nth-child(1){background-color: antiquewhite} //古董白
    div:nth-child(2) div:nth-of-type(2){background-color: gold}  //金色
</style>
<body>
    <div>
        <p></p>
        <div></div>
    </div>
    <div>
        <div></div>
        <p></p>
        <div></div>
    </div>
</body>
</html>

p:nth-child(2) 选择每个P元素是其父级的第二个子元素
p:nth-of-type(2) 选择每个P元素是其父级的第二个P元素
nth-child(n)表示，选择满足以下条件的元素：第一是一个p元素；第二是父元素的第n个子元素
nth-of-type(n)表示，选择父元素的第n个子元素p ，只看P元素

伪类选择器

E:target 表示当前的URL片段的元素类型（id被a的href链接并被点击），这个元素必须是E
E:disabled 表示不可点击（获取焦点）表单控件
E:enabled 表示可点击（获取焦点）的表单控件
E:checked 表示已选中的checkbox或radio

七、Webfont———–@font-face

//该样式应写为公共样式，否则会出现图标错乱,把所有人的图标集中到一起，生成一个font-face  
@font-face {
  font-family: 'iconfont';  /* project id 371504 */
  src: url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.eot');
  src: url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.svg#iconfont') format('svg');
}

unicode引用

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

//这个写到自己的页面内部就可以
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

其他用法见这里

网络字体(Web font)文件格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

八、CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

详细介绍见这里

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {
    body {
       background-color: lightgreen;
    }
}

制作单选框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{display:block; width:20px; height:20px; background-color:#ccc; border-radius:50%;}
        label{display:block; width:20px; height:20px;}
        input{position:absolute; left:-5000px;}
        input:checked~span{background-color:red;}
        /* “~”能选择该选择器后的所有同级选择器 */
    </style>
</head>
<body>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
</body>
</html>

我的绝伦大人

发布了31 篇原创文章 · 获赞 9 · 访问量 1万+

私信关注

CSS3新特性

CSS3新特性

一、圆角

二、阴影

CSS3边框为边框应用图片 border-image

CSS3颜色颜色之RGBA

三、CSS3变形

transform（重点）

旋转方向（3D）

四.CSS3中的动画

动画的执行方面和设置

总结（重点了解）：translate，transform，translation，anmiation的区别

五、渐变(了解)

（一）线性渐变

（二）径向渐变

六、选择器补充（重点）

七、Webfont———–@font-face

网络字体(Web font)文件格式

八、CSS3 多媒体查询

CSS預處理器和後處理器

css剩餘部分

跨域

BFC神奇背後的原理

CSS居中問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

CSS3新特性

CSS3新特性

一、圆角

二、阴影

CSS3边框 为边框应用图片 border-image

CSS3颜色 颜色之RGBA

三、CSS3变形

transform（重点）

旋转方向（3D）

四.CSS3中的动画

动画的执行方面和设置

总结（重点了解）：translate，transform，translation，anmiation的区别

五、渐变(了解)

（一）线性渐变

（二）径向渐变

六、选择器补充 （重点）

七、Webfont———–@font-face

网络字体(Web font)文件格式

八、CSS3 多媒体查询

CSS3边框为边框应用图片 border-image

CSS3颜色颜色之RGBA

六、选择器补充（重点）