盒子的大小、轮廓阴影以及圆角的设置

学习CSS时的笔记

1.box-sizing用来设置盒子尺寸的计算方式（设置width 和height的作用）
可选值：
content-box:内容盒子，默认值。宽度和高度用来设置内容区的大小
border-box:宽度和高度用来设置整个盒子可见框的大小
width 和height 指的是 内容区 、内边距 边框 的大小
自动调整内容区大小
2. outline:10px red solid；
outline 用来设置元素的轮廓线，用法和border一样
和border 不同地方就是轮廓不会影响到可见框的大小以及页面的布局
3 .box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
box-shadow:10px 10px rgba(0.0.0.0.3)
(阴影默认在元素的正下方，所以会被原来元素遮挡，看不见)
使用偏移量进行 设置，显示阴影
第一个值 设置阴影水平位置，正值向右移动，负值向左移动
第二个值 垂直偏移量 设置阴影垂直位置，正值向下移动，负值向上
第三个值 阴影的模糊效果 值越大 阴影越模糊
第四个值. 阴影的颜色
4. border-radius:用来设置圆角设置半径大小
border-radius:20px/40px 为椭圆
第一个值：水平方向的半径大小
第二个值：垂直方向半径大小

border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角

border-radius 指定四个角的圆角
四个值 左上 右上 左下 右下
三个值 左上 （右上左下） 右下
二个值 （左上右下） （右上左下）
一个值 四个角设置相同
将元素设置为一个圆形
border-radius:50%;