css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊。比如

html-css023

css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊。比如,第1张

rgba(R,G,B,A)表示的是颜色以及透明度不错,但是前面的4个数值不是表示的哪条边,他们是针对整个元素来讲的,从前往后的四个数依次表示的是:x轴偏移量、y轴偏移量、阴影的模糊值、阴影大小,偏移量是以要设置阴影的这个元素为参考。用逗号隔开表示给这个元素设置多个阴影,你这里就设置了7个阴影,阴影是可以相互覆盖的,最前面的那一条产生的阴影在最上层,这样依次往下,值得注意的一点是:如果你上层的阴影大小大于下层阴影的大小就把下层阴影覆盖掉了,可能造成看不见下层阴影的后果,像你设置的这样阴影依次增大就没问题。要是还不明白就自己一个一个参数去试,可以改变他们的颜色和偏移量来试,一看就会明白了,如果只从你上面的设置来看是看不出来的,因为你的所有阴影的偏移都为0,颜色都是白色。

还有一点,偏移量可以使正,也可以是负值。

简单的不用js就行

<!DOCTYPE HTML>

<html>

<head>

  <meta charset= "utf8">

  <title>untitled</title>

  <link rel = "stylesheet" type = "text/css" href = "">

  <style type = "text/css">

  *{

    margin: 0px

    padding: 0px

  }

  #a{

   position: absolute

   width: 50px

   height: 50px

   background-color: #f3e9e0

   border-radius: 50%

   left: 400px

   top: 200px

  }

  #a div{

   position: absolute

   width: 50px

   height: 50px

   border-radius: 50%

   transition: all 0.5s

   left: 0px

   top: 0px

  }

  #a :nth-child(1){

   background-color: #c1d4ed

  }

  #a :nth-child(2){

   background-color: #7d6e69

  }

  #a :nth-child(3){

   background-color: #dad6d5

  }

  #a :nth-child(4){

   background-color: #caaa9d

  }

  #a :nth-child(5){

   background-color: #6bdeff

  }

  #a:hover :nth-child(1){

   left: 150px

   top: -150px

  }

  #a:hover :nth-child(2){

   left: 150px

   top: 150px

  }

  #a:hover :nth-child(3){

   left: 300px

   top: -150px

  }

  #a:hover :nth-child(4){

   left: 300px

   top: 150px

  }

  #a:hover :nth-child(5){

   left: 450px

   top: 0px

  }

  </style>

</head>

<body>

<div id = 'a'>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

鼠标伸到球上 自动扩散移动

box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5) inset

CSS3边框阴影效果,对应解释,阴影向右偏移0PX ,向下平移1PX, 阴影扩散4PX,阴影颜色 带0.5度透明的黑色,inset为指定阴影效果为向内扩散,不指定则默认向外部扩散。

-moz-box-shadow 为了兼容火狐浏览器

-webkit-box-shadow 兼容webkit内核浏览器,如谷歌chrome

效果图: