前端-CSS3学习笔记六

日期：2021/1/10

P58_盒子的大小

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

2.box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
        例子：box-sizing：border-box
                可选值：
                        content-box，默认值，宽度和高度用来设置内容区的大小
                        border-box，宽度和高度用来设置整个盒子的可见框的大小
                        width和height指的是内容区、内边距和边框的总大小

P59_轮廓阴影和圆角

1.outline，用来设置元素的轮廓线，用法和border一样
        例子：outline:1px red solid
                轮廓和边框不同的地方：轮廓不会影响可见框的大小
                在：hover使用，会在鼠标移入时显示轮廓且不会影响下方布局

2.box-shadow，用来设置元素的阴影效果，阴影不会影响页面布局
        例子：box-shadow：tpx tpx tpx #fff
                第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
                第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
                第三个值：阴影的模糊半径
                第四个值：阴影的颜色

3.border-radius,用来设置圆角，圆角设置的圆的半径大小

1.border-radius：tpx，四个角的圆角
        四个值，左上、右上、右下、左下
        三个值，左上、右上/左下、右下
        两个值，左上/右下、右上/左下
注：圆形，border-radius:50%

2.border-xxx-xxx-radius:tpx,分别设置四个方向圆角
        xxx-xxx：左上、右上、右下、左下

3.border-radius：tpx / hpx，椭圆的圆角,tpx水平方向半径，hpx垂直方向半径