边框
| 属性 | 说明 |
|---|---|
| border-image | 设置边框的图像 |
| border-radius | 将边框的四角进行半径的变化 |
| box-shadow | 设置边框下拉的阴影 |
box-shadow：h v blur spread color inset;
- h表示水平阴影的位置，允许负值。
- v表示垂直阴影的位置，允许负值。
- blur表示模糊距离。
- spread表示阴影的大小
- color表示阴影的颜色
- inset表示从外侧阴影改变内侧阴影。
<style>
div {
width: 600px;
height: 400px;
color: red;
margin: auto;
background-color: seagreen;
text-align: center;
line-height: 400px;
margin-top: 100px;
border-radius: 20px;
box-shadow: 13px 10px 20px rgb(112, 112, 112);
}
</style>
<body>
<div>
这是一个div盒子
</div>
</body>
opacity透明度
opacity属性使图像具有透明，0-1之间，值越小，透明度强。
<style>
div {
width: 600px;
height: 400px;
color: red;
margin: auto;
background-image: url(./images/image.jpg);
text-align: center;
line-height: 400px;
margin-top: 100px;
border-radius: 20px;
}
div:hover {
opacity: 0.7;
}
</style>
<body>
<div>
这是一个图片，里面的图片会在鼠标划上去时产生透明现象
</div>
</body>