Js常见题目3

3.用过CSS3吗? 实现圆角矩形和阴影怎么做?

圆角border-radius； http://js.jirengu.com/yesazekuci/1/edit?html,css,output

阴影box-shadow； http://js.jirengu.com/tupexolavu/1/edit

实现圆角： 使用 border-radius

例： div {

    width: 100px;

    height: 100px；

    border: 1px solid green;

    border-radius: 10px;

}

border-radius 接受px、em、rem等等单位的值

border-radius 接受1-4个值：

1个值：四个角都为同一个值

2个值：左上角和右下角使用第一个值，右上角和左下角使用第二个值

3个值：左上角使用第一个值，右上、左下使用第二个值，右下角使用第三个值

4个值：从左上起顺时针使用1-4个值

border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius 分别表示四个角，可以单独设置样式

实现阴影：使用 box-shadow

例：    div {

      width: 100px;

      height: 100px;

      border: 1px solid green;

      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  }

box-shadow 有五个值： inset（阴影默认在边框之外，使用inset则在边框内） 、 <offset-x>/<offset-y> （设置阴影偏移量，x表示水平偏移，y表示垂直偏移，可以有负值）、 <blur-radius> （此值越大，模糊面积越大，阴影越淡）、 <spread-radius> （默认为0，正值时，阴影扩大；负值时，阴影缩小）、 <color> （设置阴影颜色）