首页 > 代码库 > 边框的设定
边框的设定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单布局</title>
<style>
body{
margin:0px;
padding:0px;
}
#bj{
margin:0px auto;
background:linear-gradient(to top,#fff 20%, #0077ff 99%);
width:800px;
height:900px;
font-size:50px;
text-align:center;
border-radius:0%;
color:white;
}
#ps{
width: 300px;
height: 40px;
border-width:5px;
border-color:purple;
border-style:double;
border-radius:10px;
}
#tx{
border-width:5px;
border-color:purple;
border-style:double;
width: 300px;
height: 40px;
border-radius:10px;
}
#yx{
border-width:5px;
border-color:purple;
border-style:double;
width: 300px;
height: 40px;
border-radius:10px;
}
#dy{
background:#0077ff;
color:#ffffff;
font-family:"楷体";
font-size:20px;
width: 90px;
height: 40px;
border-width:5px;
border-color:purple;
border-style:double;
border-radius:10px;
position:absolute;
left:600px;
top:300px;
}
#bq{
position:absolute;
top:0px;
left:140px;
}
</style>
</head>
<body>
<div id="bj">
用户登录
<form action" method="post" accept-charset="utf-8">
<label for="ps"></label><input id="ps" type="text" name="password" value="" placeholder="请输入姓名"><br>
<input id="tx" type="text" name="tx" value="" placeholder="请输入邮箱"><br>
<input id="yx" type="password" name="yx" value="" placeholder="请输入密码"><br>
<input id="dy" type="submit" name="su" value="http://www.mamicode.com/登录">
</form>
<div id="bq">
<a href="http://www.mamicode.com/index.html"><input id="dy" type="submit" name="su" value="http://www.mamicode.com/注册"></a>
</div>
</div>
</body>
</html>
CSS 边框
在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框；CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick
position属性分为相对移动和绝对移动，相对移动表示为relative，绝对移动为absolute。相对是指相对自己原来的位置移动；绝对是相对与父级移动,如果父级元素没有position属性就相对于body移动
本文出自 “12145719” 博客，谢绝转载！
边框的设定