<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: blue;
border: brown solid 20px;
/* 盒子的阴影 shadow 在元素下层 不会影响盒子大小
1 水平偏移
2 垂直偏移
3 阴影范围
4 颜色
*/
box-shadow: 20px 20px 20px greenyellow ;
}
.box:hover{
/*轮廓 outline不会影响盒子大小 直接覆盖下方 */
outline: springgreen solid 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: hotpink;
/* 倒角 radius*/
/* border-radius */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius:20px;
/* 50%以上都为圆形 */
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
123
<div class="box2"></div>
</body>
</html>
扫一扫
5618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
