Css3 Small Technology

 







   border-radius

 

    border-radius:length * ：       ，            ， px        ，      ，  50%，           ，           ，  border-radius:5px 2px 4px 1px，     、  、  、  ，border-top-left-radius:5px;  IE9+、Firefox 4+、Chrome、Safari 5+    Opera   。。。             ，     ，      ，  -moz、  /  -webkit、Opera -o、ie -ms。

 

 

      box-shadow

     box-shadow：h-shadow v-shadow blur spread color inset

     * ： h-shadow    （  ） v-shadow    （  ） blur    （  ） spread   （  ） color    （  ） inset    ，      inset，       ，       。



         text-shadow

     text-shadow:h-shadow v-shadow blur color

     h-shadow    （  ） v-shadow    （  ） blur    （  ） color    （  ）。

 

         gradient

     gradient        ，           ，       ，   background-image:-moz-linear-gradient(center top , #ddd 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%);linear-gradient     ，radial-gradient     ，            ，top     、left     ，     left top，           ,    center，    ，#ddd 0%          ，#ADADAD 100%    ，                      ，   50%      ，   50%         ，   50%         


       webkit     ，background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));linear           ，         ，      ，               ，              ，                  ，  ，        color-stop(0, #ddd)     color-stop   ，0    ，        ，1      ，       0 1       。



        -webkit-box-reflect

      -webkit-box-reflect：direction | offset | mask-box-image

          weibkit        ，direction    above：        、below：  、left：  、right：  ，offset           ，       ，      ，     ； ps          ，mask-box-image     ，       ；none：      、url：        、linear-gradient：            、radial-gradient：    (   )         、repeating-linear-gradient：               、repeating-radial- gradient：       (   )        ，    ，         ，-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3))             ，         。