<!DOCTYPE HTML>
<html>
<head>
<title>HTML/CSS布局中背景色、边框样色、表单输入框的应用</title>
<style>
*{
margin: 0px;
padding: 0px;
}
<!--背景颜色的控制-->
body{
/*颜色名称*/
/*background: red;*/
/*十六进制颜色值*/
/*background: #c97474;*/
/*background: rgb(129,44,44);*/
/*背景色透明度:*/
/*background: rgba(129,44,44,0.2);*/
/*背景图片，不允许重复*/
/*background: url(../static/images/bk.jpg) no-repeat;*/
/*background-size:100%;*/
/*背景色的线性渐变，方向，起始颜色，终止颜色*/
/*background: linear-gradient(to right,red,blue);*/
}
div{
width: 200px;
height: 200px;
margin: 50px auto;
/*边框属性:border:宽度 样式 颜色；(样式：dotted：点线边框、dashed:虚线边框、
solid：实线边框、double：两个边框)*/
border:1px dashed #ccc;
/*设置单边框*/
/*border-top: 1px dashed #ccc;*/上边框
/*border-left:1px dotted #ccc ;*/左边框
/*border-bottom:1px solid #ccc ;*/下边框
/*border-right:1px double #ccc ;*/右边框
}
/*边框阴影*/
p{
width: 200px;
height: 200px;
margin: 50px auto;
box-shadow: 2px 2px 20px #ccc;
/*边框圆角*/
/*border-radius:50%;*/
border-top-right-radius: 20px;/*上右角*/
border-top-left-radius: 20px;/*上左角*/
border-bottom-right-radius: 20px;/*下右角*/
border-bottom-left-radius: 20px;/*下左角*/
}
</style>
</head>
<body>
<div></div>
<p></p>
</body></html>
