CSS控制边框和背景
定义简单边框
- Border-width
- Border-style
- Border-color
- Border-radius:弧度边框:x/y
Border简写属性
Border:50px solid red
定义简单背景
- Background-color
- Background-image
- url()
- Background-size
- auto:默认
- contain:按照body大小进行平铺
- cover:只出现一次,会自身缩放
- Background-repeat
- norepeat:不重复,就一张
- Background-attachment
- fixed:随着页面一起滚动
- local:不滚动
Background简写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CreateBorder&Background</title>
<style type="text/css">
/*.Servant{
border-width: 8px;
border-color: #345cff;
border-style: inset;
border-top-color: #fff314;
border-bottom-style: dashed;
}*/
.Servant{
/*width: 1920px;
height: 1080px;
border: 5px solid red;
border-top: 10px solid blue;*/
/*background-color: #ffff00;*/
background-image: url(桌面壁纸/桌面壁纸-3.png);
background-size: contain;
background-repeat: repeat;
}
</style>
</head>
<body class="Servant">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>