网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

boxshadow,boxshadow四个值的意思

2020-3-17 14:27:59 | 作者:老铁SEO | 0个评论 | 人浏览

  box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor


  (投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)


  box-shadow:6px6px6px#292929;对应的值


  inset———默认的情况下是外阴影,如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影


  boxshadow四个值的意思


  ox-shadow:h-shadowv-shadowblurspreadcolorinset;


  注释:box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。


  h-shadow必需。水平阴影的位置。允许负值。


  v-shadow必需。垂直阴影的位置。允许负值。


  blur可选。模糊距离。


  spread可选。阴影的尺寸。


  color可选。阴影的颜色。请参阅CSS颜色值。


  inset可选。将外部阴影(outset)改为内部阴影。


  CSS代码


  body{background:#f00;}


  html{background:#f00;}/*html加背景色*/


  .g1{


  width:500px;


  height:500px;


  border:2pxsolid#fff;


  margin:30pxauto;


  background-color:#fff;


  box-sizing:border-box;


  }


  .g2{


  width:400px;


  height:400px;


  margin:50pxauto;


  border:2pxsolid#000;


  box-shadow:5px5px5px#000,5px-5px5px#000,-5px5px5px#000,-5px-5px5px#000;


  }


  boxshadow内部阴影


  如果页面中存在绝对定位(position:absolute)或固定定位(position:fixed)的元素时,这些元素与主文档流并不在同一平面(你可以把它们想象成漂浮在空中的),这样的话地面物体的阴影肯定不能遮挡空中物体啦!你可以把含box-shadow属性的元素也弄成绝对定位或固定定位的,并且把z-index属性弄得比其他漂浮元素都大,这样它的阴影就能遮盖所有其他元素了。一句话概括,就是要把它弄成最高的那一层!


  补充一点:即使是在同一平面(所有元素都在地面,没有漂浮在空中的元素),那么如果含有box-shadow属性的元素后面还有其他元素,那么它的阴影也是没法遮盖后面的元素的。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐