<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画个盒子</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: deeppink;
/*边框的样式 边框的宽度 边框的颜色*/
border: double 5px yellow;
}
#box2{
width: 500px;
height: 400px;
background-color:orange;
background-image: url(img/PIC/2.jpg);
/*x方向 y方向 设置背景图适应盒子*/
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
border: solid 5px blue;
background-image: url(img/PIC/hot.png);
/*x方向 y方向 设置背景图适应盒子*/
/*background-size: 100% 100%;*/
/*加个-x 表示竖排列 加个-y表示横排列 */
/*background-repeat-y: no-repeat;*/
background-repeat-x: no-repeat;
}
#circle{
width: 200px;
height: 200px;
background: greenyellow;
/*圆角*/
border-radius: 50%;
border: solid 10px red;
}
#circle02{
width: 200px;
height: 200px;
background: hotpink;
/*左上角 右上角 右下角 左下角*/
border-radius:4px 8px 16px 32px;
border: solid 10px deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<br />
<div id="box2"></div>
<div id="box3"></div>
<div id="circle"></div>
<div id="circle02"></div>
</body>
</html>
效果如下：
box：
box2：
box3：
box4：
box5：
扫描二维码关注公众号，回复：
5953349 查看本文章
