盒子模型

 

 每一个可见的 HTML 元素都是一个盒子

 盒子模型从外到内分别是 margin border padding content 

盒子模型的属性:box-sizing box-sizing:content-box 时是标准盒子模型;box-sizing:border-box 时是IE 盒子模型;inherit 规定从父元素继承 box-sizing 属性

当 margin/padding 属性后只跟一个值--上下左右;两个值--上下 左右;三个值:上 左右 下;四个值:上 右 下 左

border-style 属性

  none:无边框

  hidden:与 none 相同 但是用于表时解决边框冲突

  dotted:点状边框

  dashed:虚线

  solid:实线

  double:双线

  groove:3D 凹槽

  inherit:继承父元素边框

盒子阴影(CSS3 新增属性)box-shadow

正规语法:none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

  inset:默认阴影在边框外 如果使用 inset 阴影在边框内

  offset-x, offset-y:阴影偏移量;offset-x 值为正向右偏,为负向左偏;offset-y 是垂直偏移量,为负阴影在元素下

  blur-radius:值越大阴影模糊面积越大 阴影模糊越淡 不可为负

  spread-radius:正值 阴影扩大,负值 阴影收缩

  color:颜色

设置多个阴影时用逗号隔开

posted @ 2020-01-08 11:01  丧心病狂工科女  阅读(160)  评论(0编辑  收藏  举报