---
title: 盒子属性
date: 2024-06-06T23:51:30Z
tags: []
---



## 怪异盒模型

|可选值|含义|
| --------| -------------------------------------|
|​`content-box`​|width和height设置的盒子内容区的大小|
|​`border-box`​|width和height设置的是盒子总大小|

## 调整盒子大小

​`resize`​  
需要配合`overflow`​  
可选值:

1. ​`none`​:不允许用户调整元素大小
2. ​`both`​:用户可以调节宽度和高度
3. ​`horizontal`​:用户可以调节元素的宽度
4. ​`vertical`​:用户可以调节元素的高度

## 盒子阴影

​`box-shadow`​语法:  
​`box-shadow:h-shadow v-shadow blur spread color inset`​

|值|含义|
| :----------------------------------------------------------------------------| ------------------------------------|
|​`h-shadow`​|水平阴影的位置,必须填写,可以为负值|
|​`v-shadow`​|垂直阴影的位置,必须填写,可以为负值|
|​`blur`​|可选,模糊距离|
|​`spread`​|可选,阴影的外延值|
|​`color`​|可选,阴影的颜色|
|​`inset`​|可选,将外部阴影改为内部阴影|
|**不同值的含义**||
|2. 水平位置,垂直位置||
|3. 水平位置,垂直位置,颜色||
|4. 水平位置,垂直位置,模糊值,颜色||
|5. 水平位置,垂直位置,模糊值,外延值,颜色||
|6. 水平位置,垂直位置,模糊值,外延值,颜色,内阴影||

‍

## 不透明度

​`opacity`​  
值在0,1之间的小数  
0:完全透明  
1:完全不透明
