0
点赞
收藏
分享

微信扫一扫

CSS3学习(六):盒模型补充

诗与泡面 2022-03-13 阅读 44

1、盒子大小

默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:

  • content-box 默认值,宽度和高度用来设置内容区的大小
  • border-box 宽度和高度用来设置整个盒子可见框的大小

2、轮廓

outline用来设置元素的轮廓线,用法和border一模一样

轮廓和边框不同点是,轮廓线不会占据空间

3、阴影

box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
语法:

box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴影。

阴影示例

4、圆角

border-radius 用来设置圆角,圆角设置的是圆的半径大小
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius 分别设置四个角

border-radius 可以分别指定四个角的圆角

  • 四个值:左上 右上 右下 左下
  • 三个值:左上 右上/左下 右下
  • 两个值:左上/右下 右上/左下
  • 一个值:左上/右上/右下/左下

椭圆圆角:

使用border-radius指定四个角的圆角时,分别设定水平半径和垂直半径,用/隔开。
使用border-top-left-radius等指定圆角时,分别设定水平半径和垂直半径,用空格隔开。

举报

相关推荐

0 条评论