锐客网

  1. 首页 > 睿知 > it技术 > >

CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影

csshtmlcss3

【CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影】
文章目录

  • 一、盒子模型
    • 1.1布局的本质
    • 1.2盒子模型组成
    • 1.3边框（border)
    • 1.4表格的细线边框
    • 1.5边框会影响盒子的实际大小
    • 1.6内边距（padding)
    • 1.7外边距(margin)
    • 1.8外边距合并
    • 1.9清除内外边距
  • 二、圆角边框
  • 三、盒子阴影
  • 四、文字阴影

一、盒子模型 1.1布局的本质 网页布局过程：
1.先准备好相关的网页元素，基本都是盒子。
2.CSS设计盒子样式，摆到相应的位置。
3.往盒子里面装内容。
1.2盒子模型组成 CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

1.3边框（border) 边框宽度(px)，边框样式(solid 实线 dashed 虚线边框 dotted 点线边框)，边框颜色
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

边框的复合写法：
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

分开：border-top:
1.4表格的细线边框 border-collapse属性用来合并相邻的边框
1.5边框会影响盒子的实际大小 边框会额外增加盒子的实际大小
1.6内边距（padding) 即边框与内容之间的距离
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

复合属性：
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

！：padding也会影响盒子的实际大小，如果盒子已经有了高度和宽度，padding则还会撑大盒子
解决方案：用盒子大小-padding大小（左右均有*2）
未指定宽度和高度不会撑开盒子
1.7外边距(margin) margin属性用来设置外边距，即控制盒子与盒子之间的距离
外边距可以让块级元素水平居中显示
（1）盒子必须指定了高度
（2）盒子外边距都设置为auto
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

行内元素水平居中可以给其父元素添加text-align：center
1.8外边距合并 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会大塌陷较大的外边距值。
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

1.9清除内外边距 实际开发常用：
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

二、圆角边框 border-radius属性可以设置元素的外边框圆角。
CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

  • 参数值可以为数值或者百分比；
  • 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
  • 如果是个据行，设置为高度的一般就可以做
  • 该属性是一个简写属性，可以跟四个值。分别：左上角、右上角、右下角、左下角
    CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
    文章图片
三、盒子阴影 CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

box-shadow:10px 10px 10px 10px black; x距离，y距离，模糊距离（实虚），阴影的尺寸，阴影的颜色。
常用：CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

四、文字阴影 CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
文章图片

    推荐阅读


    上一篇：#|CSS3新特性

    下一篇：Vue的事件修饰符