/*      */

/*    ，  body       ，     body    
       ：        
    {
           :    ;
    }
*/
body{
    background-color: aquamarine;
}

/*      ：             ，   body{}，p{}，div{}*/
p{
    color: blue;
}

/* id   ，     id         ，  #id   {}，   #box{} */
#box{
    height: 100px;
}

/* class   ，     class       ，   .class   {}
              class    
    
    
    id box
    
    class blue 
 */
.blue{
    color: blue;
}

/*       */
.blue::after{
    /*       */
    color: #9198e5;
}
/*      */
div[title=div1]{
    /*      */
    border: 5px solid;

    /*   
       :         ，        ，        ，        。
       :         ,             ，        
       :             ，            
       ：        :   
    */
    border-radius: 25px;

    /*    （   div   ） */
    padding: 10px 40px;

    /*           （color，image，origin） */
    background: #dddddd;
    width: 300px;

    /* div     */
    box-shadow: 10px 10px 5px #888888;
    /*         */
    box-shadow: 10px 10px grey;

    /*      */
    border-image: url(./rng.png) 30 30 round;
}

#example1{
    background-image: url(./rng.png);
    
    /*            */
    background-position: right bottom;
    
    /*           （  ，   ） */
    background-repeat: no-repeat;
   
    /*         */
    background-size: 100% 100%;

    /*          （      ，div     ，      ） */
    background-origin: content-box;

    /*      */
    background-clip: content-box;

    padding: 30px 50px;
    width: 300px;
    height: 500px;
}

#grad1{
    height: 200px;
    background-color: red;
    /*            */
    background-image: linear-gradient(#e66465, #9198e5);

    /*          */
    background-image: linear-gradient(to right, red, yellow);

    /*            */
    background-image: linear-gradient(to bottom right, red, yellow);

    /*     */
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

    /*         */
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

    /*      */
    background-image: radial-gradient(red,yellow,green);

    /*     
    shape        。      circle   ellipse。
      ，circle     ，ellipse      。     ellipse。
    */
    background-image: radial-gradient(circle, red, yellow, green);
}

/* css3      */
h1{
    /*      */
    text-shadow: 5px 5px 5px #FF0000;
}

p{
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    /*            ellipsis   ...， clip            */
    /* text-overflow: ellipsis; */
    text-overflow: clip;

    /*    */
    word-wrap: break-word;
}

/*      */
@font-face{
    font-family: serif;
    src: url();
    font-weight: bold;
}

/* 2D   */
div{
    transform: rotate(30deg);
    /* ie 9 */
    -ms-transform: rotate(30deg);
    /* Safar */
    -webkit-transform: rotate(30deg);
}

/* 3D   */
#example1{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari   Chrome */
}

/*    */
div{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s linear 2s;
	/* Safari */
	-webkit-transition:width 1s linear 2s;
}

div:hover
{
    width:300px;
}

/* css   */
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

/* css3      */
div{
    resize:both;
    overflow: auto;
}

/*       */
img{
    max-width: 100%;
    height: auto;
}

/* css    */
div{
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    /*  
           box-sizing: border-box; 
      padding(   )   border(  )      width   height  :
    */
    box-sizing: border-box;
}

/* css3      flex box（   ） */
/* https://www.runoob.com/css3/css3-flexbox.html */

/*       */
/* https://www.runoob.com/css3/css3-mediaqueries.html */

/*   grid */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid */