Look at the renderings: normal display:   When mouseover effect:  

  code is as follows:  


<! Doctype html> <The HTML lang="useful - cn >" <Head> <Meta charset="utf-8"/> <Title> CSS3 properties 2013-05-21 </title> <Style> The li: hover {border - color: # 999; Background - color: # BBB; Color: # 999; }. The text {margin: 5 px; Float: left; Background: # FFF; Height: 250 px; Width: 200 px; Border: 1 px solid # CCC; The transition - the property: all; The transition - duration: 5 s; The transition - the timing - function: ease - out; - moz - the transition - the property: all; - ms - the transition - the property: all; - o - the transition - the property: all; - the webkit - the transition - the property: all; - moz - the transition - duration: 5 s; - ms - the transition - duration: 5 s; - o - the transition - duration: 5 s; - the webkit - the transition - duration: 5 s; - moz - the transition - timing - function: ease - out; - ms - the transition - timing - function: ease - out; - o - the transition - timing - function: ease - out; Webkit -- the transition - the timing - function: ease - in; }. Text: hover {box - shadow: 0 0 10 px # CCCCCC; - moz - box - shadow: 0 0 10 px # CCCCCC; - ms - box - shadow: 0 0 10 px # CCCCCC; - o - box - shadow: 0 0 10 px # CCCCCC; - the webkit - box - shadow: 0 0 10 px # CCCCCC; The transform: scale (1.2); Moz - transform: scale (1.2); - ms - transform: scale (1.2); - o - transform: scale (1.2); Webkit - transform: scale (1.2); } </style> </head> <Body> <Div class="text" > <P> Please test the css3 </p> </div> <Div class="text" > <P> Please test the css3 </p> </div> <Div class="text" > <P> Please test the css3 </p> </div> <Div class="text" > <P> Please test the css3 </p> </div> <Div class="text" > <P> Please test the css3 </p> </div> </body> </html>


This concludes the body part