html部分代码写的比较简单 直接贴出 css代码
td {
/*内边距*/
padding: 50px;
background-color: red;
}
p {
/*边框风格*/
border-style: solid;
border-top-style: groove;
border-left-style: dashed;
/*边框宽度*/
border-width: 2px;
/*边框 圆角*/
border-radius: 10px;
/*边框 图片*/
/* border-image: url("");*/
box-shadow: blue;
text-align: center;
width: 100px;
}
#did {
width: 200px;
height: 100px;
background-color: aqua;
/*边框 阴影*/
box-shadow: 5px 10px 0 red;
}
/*两个元素挨着时,外边距叠加 遵循边距大的原则*/
#did1, #did2 {
background-color: blueviolet;
width: 50px;
height: 50px;
/*外边距*/
margin: 10px;
}