一、box-shadow 在CSS3中盒模型新增了box-shadow样式，该样式可以为盒模型设置阴影，详解见 box-shadow
示例，下面为盒模型设置阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #sh{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: red; width: 300px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; box-shadow: 10px 10px 10px 10px yellow; } </style> </head> <body> <div id="sh"> 上海 </div> </body> </html>box-shadow: 10px 10px 10px 10px yellow表示原来的盒模型向下、向左、扩展、模糊半径各位10px 效果如下：
二、border-radius CSS3新增属性border-radius，允许你设置元素的外边框圆角。 border-radius属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius按顺序的简写，用来设置举行或长方形的4个角的弧度，可以圆弧度，也可以是椭圆弧度，顺序从左上角开始，按顺时针方向。属性的值可以用px或者%表示。 border-radius属性见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius 1、例如border-radius ：50%，表示四个角的圆半径为长或宽的50%，等价于
border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;示例
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #id{ width: 300px; height: 300px; background: green; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; position: absolute; border-radius: 50%; } </style> </head> <body> <div id="id"> </div> </body> </html>也可以分别设置每个角的弧度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #id{ width: 300px; height: 300px; background: green; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; position: absolute; border-radius: 30px 60px 90px 120px; } </style> </head> <body> <div id="id"> </div> </body> </html>2、也可以设置椭圆弧度 上面border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius都是设置的一个值，表示的圆半径，可以可以设置两个值，表示椭圆的半长轴和半短轴 例如border-radius: 200px/100px相当于
border-top-left-radius: 200px 100px; #椭圆的场半轴 短半轴 border-top-right-radius: 200px 100px; border-bottom-right-radius: 200px 100px; border-bottom-left-radius: 200px 100px;示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #id{ width: 400px; height: 200px; background: green; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; position: absolute; border-radius: 200px/100px; } </style> </head> <body> <div id="id"> </div> </body> </html>综合1、2示例，风车
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body{ height: 100%; overflow: hidden; } #wrap{ width: 500px; height: 500px; /*background: red;*/ left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; transition: 2s } #wrap > div{ width: 200px; height: 200px; background: red; float: left; margin: 25px; } #wrap > div:nth-child(1), #wrap > div:nth-child(4){ border-radius: 0 50%; } #wrap > div:nth-child(2), #wrap > div:nth-child(3){ border-radius: 50% 0; } #wrap:hover{ transform: rotate(360deg); } </style> </head> <body> <div id="wrap"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>