淘先锋技术网

首页 1 2 3 4 5 6 7

box-shadow盒子阴影

语法

外阴影:box-shadow: X轴  Y轴  Rpx  color;
属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色
内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;
默认是外阴影        内阴影:inset 可以设置成内部阴

注意:

 此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影   如果设置文字阴影请参考知识点:text-shadow(同理)
 因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

box-shadow盒取值

  1. none:无阴影
  2. length①:第 1 个长度值定义元素的阴影水平偏移值。正值,阴影出现在元素右侧;负值,则阴影出现在元素左侧
  3. length②:第 2 个长度值定义元素的阴影垂直偏移值。正值,阴影出现在元素底部;负值,则阴影出现在元素顶部
  4. length③:第 3 个长度值定义元素的阴影模糊值半径(如果提供了)。该值越大阴影边缘越模糊,若该值为0,阴影边缘不出现模糊。不允许负值
  5. length④:第 4 个长度值定义元素的阴影外延值(如果提供了)。正值,阴影将向四面扩展;负值,则阴影向里收缩
  6. color:定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色
  7. inset:定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影‘