一、边框属性
作用：给元素加上一个边框
第一种：
border-top
border-bottom
border-left
boder-right
三个属性 粗细 线型 颜色
第二种：
border ：粗细 线型 颜色
透明色：transparent
边框弧度：border-radius: 单位是px
只有一个值时，表示边框的四个角都是同样的弧度；同理，如果有四个不同的值，表示四个角都是不同的弧度，顺序是左上角、右上角、右下角、左下角。
只有一个值：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 200px;
border: 3px solid red;
border-radius:6px ;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
四个不同的值时
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 200px;
border: 3px solid red;
border-radius:6px 20px 40px 0px;/*分别是左上角、右上角、右下角、左下角*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
二、轮廓
作用：绘制于元素周围的一条线，位于边框外
属性： 粗细 线型 颜色
outline-width: 20px;
outline-style: solid;
outline-color: red;
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 200px;
/*border: 3px solid red;*/
/*border-radius:6px 20px 40px 0px;/*分别是左上角、右上角、右下角、左下角*/
background-color: pink;
outline: 10px solid palevioletred;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
三、盒子模型
组成： 内容 内边距 边框 外边距
边框：border
内边距：padding 边框和内容之间的距离
padding 存在一个值 上下左右都是改值
存在两个值 上下一个值 左右一个值
存在三个值 上 左右 下
存在四个值 上右下左
可以单独的去设置 例如 padding-top
外边距：margin 元素和元素之间的距离
口红是内容，口红到边框的距离是内边距，两个边框之间的距离就是外边距
背景属性
分类 ： 纯色背景（背景颜色） 背景图像
1.背景颜色
background-color ： 任意合法的颜色 和 transparent
<style type="text/css">
.father{
width: 300px;
height: 300px;
background-color: pink;/*背景颜色为粉色*/
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
2.背景图像
background-image ： url（）
<style type="text/css">
.father{
width: 300px;
height: 300px;
/*background-color: pink;*/
background-image: url(img/01.jpg);
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
3.背景图像平铺
background-repeat：
1.repeat ： 默认值水平垂直方向都平铺
2.repeat-x：水平方向平铺
3.repeat-y：垂直方向平铺
4.no-repeat： 不平铺
<style type="text/css">
.img-bottom ul li:hover{
background-color: #000000;
color: #e9c06c;
}
.body-min-right ul li{
width: 130px;
height: 55px;
background-color: white;
/*border: 1px solid black;*/
list-style: none;
float: left;
margin-top: 3px;
margin-left: 2px;
}
.body-min-right ul li div{
width: 30px;
height: 30px;
/*border: 1px solid black;*/
display: inline-block;
background-image: url(img/icon.png);
margin-top: 13px;
margin-left: 20px;
}
.div1{
background-position: -200px 0px;
}
.div2{
background-position: -560px 0px;
}
.div3{
background-position: -590px 0px;
}
.div4{
background-position: -379px 0px;
}
.div5{
background-position: -649px 0px;
}
.div6{
background-position: -289px 0px;
}
.div7{
background-position: -619px 0px;
}
.div8{
background-position: -259px 0px;
}
.div9{
background-position: -470px 0px;
}
.div10{
background-position: -500px 0px;
}
.div11{
background-position: -409px 0px;
}
.div12{
background-position: -439px 0px;
}
}
</style>
<body>
<div class="body-min-right">
<video width="400px" height="150px" autoplay="" loop="" muted="">
<source src="img/down.mp4" type="video/mp4">
</video>
<ul>
<li class="">
<div class="div1"></div>
<span>新手推荐</span>
</li>
<li class="">
<div class="div2"></div>
<span>宇宙官网</span>
</li>
<li class="">
<div class="div3"></div>
<span>周边商城</span>
</li>
<li class="">
<div class="div4"></div>
<span>新客户端</span>
</li>
<li class="">
<div class="div5"></div>
<span>峡谷之巅</span>
</li>
<li class="">
<div class="div6"></div>
<span>CDK兑换</span>
</li>
<li class="">
<div class="div7"></div>
<span>轮换模式</span>
</li>
<li class="">
<div class="div8"></div>
<span>游戏资料</span>
</li>
<li class="">
<div class="div9"></div>
<span>领奖中心</span>
</li>
<li class="">
<div class="div10"></div>
<span>官方微博</span>
</li>
<li class="">
<div class="div11"></div>
<span>玩家论坛</span>
</li>
<li class="">
<div class="div12"></div>
<span>在线客服</span>
</li>
</ul>
</div>
</body>
4.背景图片的尺寸
background-size： value1 value2 宽度 和 高度 单位 是PX
value% value% 宽度 和 高度 单位 是%
cover : 全覆盖 将背景图等比放大直到背景图完全覆盖到元素的所有区域
contain：包含 将背景图等比放大 ，直到下边或者右边有一个边缘碰到元素为止
5.背景图片固定
background-attachment: fixed;
scroll：滚动 fixed 固定
6.背景定位
改变背景图像在元素中的默认位置
属性 ： background-position
x y 水平偏移距离 和垂直偏移距离
单位 ： px % top left right bottom
7.CSS中的 雪碧图、精灵图
作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。
知识点补充：
下拉列表里的下拉箭头的样式修改
select{
/*取消默认箭头开始*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*取消默认箭头结束*/
border: none;
width: 9rem;
font-size: 1rem;
color: #666;
text-align-last: center; /* 文本居中*/
background: url(style/jiantou.png) no-repeat right 0.5rem center;
background-size: 0.45rem 0.8rem;
}
/*下拉后箭头*/
select:focus {
background: url(style/jiantou_bottom.png) no-repeat right 0.5rem center;
background-size: 0.8rem 0.45rem;
}下拉列表下拉箭头样式修改知识点是在别人的博客里看到的，之后会补充原网页网址
6433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
