盒子内容补充
1 盒子的大小
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
box-sizing:border-box
}
默认情况下，盒子可见框的大小由内容区和边框共同决定
- box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
- 可选值：content：默认值，宽度和高度用来设置内容区的大小
- border-box：宽度和高度用来设置整个盒子可见框的大小
- width和height指的是内容区和内边距和边框的大小
2 轮廓和圆角
2.1 轮廓
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
- outline：用来设置元素的轮廓线，用法和border一模一样
- 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
<body>
<!-- <div class="box1"></div> -->
<div class="box2"></div>
</body>
2.2 阴影：
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3);
/*（括号内是填rgb三原色的）
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
-
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
-
第二个值：垂直偏移量，设置阴影的水平位置
-
第三个值：阴影模糊半径
-
第四个值：阴影的颜色
2.3 圆角
.box2{
width: 200px;
height: 200px;
background-color: orange;
border-radius: 50%;
}
/* border-radius: 用来设置圆角 圆角设置的圆的半径大小*/
/* border-top-left-radius: */
/* border-top-right-radius */
/* border-bottom-left-radius: */
/* border-bottom-right-radius: */
/* border-top-left-radius:50px 100px; */
-
border-radius：可以分别指定四个角的圆角
-
四个值：左上，右上，右下，左下
-
三个值：左上，右上/左下，右下
-
两个个值：左上/右下，右上/左下
-
border-radius: 50%（可以设置成一个圆形）
.box {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
高和宽都设置为100像素，那么最终会是个红色的圆形，倘若修改宽高中的一些数据，会变成椭圆形。
扫一扫
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
