CSS基础(14)_盒子大小、轮廓、阴影、圆角的设置

盒子的大小

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

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

可选值&＃xff1a;
    content-box&＃xff1a;   默认值&＃xff0c;宽度和高度用来设置内容区的大小。
    border-box&＃xff1a;    可选值&＃xff0c;宽度和高度用来设置整个盒子可见框的大小。

轮廓、阴影设置

outline&＃xff1a;轮廓是在元素周围绘制的一条线&＃xff0c;在边框之外&＃xff0c;以凸显元素&＃xff0c;用法和border一模一样(轮廓和边框不同的点&＃xff0c;就是轮廓不会影响到可见框的大小)。

box-shadow&＃xff1a;用来设置元素的阴影效果&＃xff0c;阴影不会影响页面布局。

可选值&＃xff1a; 
    第一个值 水平偏移量 设置阴影的水平位置  正值向右移动 负值向左移动
    第二个值 垂直偏移量 设置阴影的水平位置  正值向下移动 负值向上移动
    第三个值 阴影的模糊半径
    第四个值 阴影的颜色

.box1{width: 100px;height: 100px;padding: 10px;background-color: rgb(165, 211, 201);border: 10px solid darkgreen;margin: 20px 20px;/* 默认情况下&＃xff0c;盒子内容区宽高为 100&＃43;20&＃43;20&＃61;140px, *//* 如果box-sizing设置为border-box, 则整个盒子宽高为 100px&＃xff08;包含内边距和边框&＃xff09;*/ box-sizing: content-box; /* 注意&＃xff1a;轮廓不会影响到可见框的大小 */outline: 10px solid greenyellow;
}
.box1:hover{/* 设置轮廓为10px的 深绿色的 实心轮廓 */outline: 10px solid darkgreen;/* 设置向右向下偏移20px模糊半径为10px的黑色阴影 */box-shadow: 20px 20px 10px rgb(0, 0, 0);
}

 鼠标移入后效果如下&＃xff1a;

圆角设置

border-radius&＃xff1a;用来设置圆角&＃xff0c;圆角设置的是圆的半径大小。有四个值&＃xff1a;
border-top-left-radius&＃xff1a;
border-top-right-radius&＃xff1a;
border-bottom-left-radius&＃xff1a;
border-bottom-right-radius&＃xff1a;

border-radius可以分别指定四个角的圆角&＃xff0c;设置不同值会显示不同规则。
四个值: 左上 右上 右下 左下
三个值&＃xff1a;左上 右上/左下 右下
两个值&＃xff1a;左上/右下  右上/左下

如果想讲元素设置为圆形&＃xff0c;可以设置百分比&＃xff0c;如下所示&＃xff1a;
border-radius&＃xff1a;50%

.box2{width: 100px;height: 100px;margin: 30px;background-color: aquamarine;/* 以个顶点原点&＃xff0c;横坐标纵坐标&＃xff08;目标向内&＃xff09;位置为圆心&＃xff0c;各顶点长度为半径画的圆*/border-radius: 10px 20px 30px 40px;
}
.box3{width: 100px;height: 100px;margin: 30px;/* 值为50%以上都是圆形 */border-radius: 50%;background-color: green;
}

效果展示&＃xff1a;