1、圆角

通过border-radius属性来设置圆角，border-radius可接受四个参数：
一个参数时：四个圆角值相等，如果设置为圆的话设置值为100%。
二个参数时：第一个值为左上角与右下角，第二个值为右上角和左下角
三个参数时：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
四个参数时：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3新特性-圆角</title>
  7.     <style>
  8.       div{
  9.         width: 100px;
  10.         height: 100px;
  11.         /* 上边距0 左右auto是平分的意思，也就是水平居中 */
  12.         margin: 0 auto;
  13.         background-color: rebeccapurple;
  14.         border-radius: 5px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  20.     <div></div>
  22.   </body>
  23. </html>

image.png

2、阴影

通过box-shadow属性来设置阴影，box-shadow属性可接受四个参数：
第一个参数：水平阴影的位置，正数在下方，负数在上方
第二个参数：垂直阴影的位置，正数在下方，负数在上方
第三个参数：模糊距离
第四个参数：阴影的颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3新特性-阴影</title>
  7.     <style>
  8.       div{
  9.         width: 100px;
  10.         height: 100px;
  11.         background-color: rebeccapurple;
  12.         box-shadow: 10px 10px 10px gray;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  18.     <div></div>
  20.   </body>
  21. </html>

image.png