列表样式及盒子模型

最新推荐文章于 2024-04-29 18:25:35 发布
最新推荐文章于 2024-04-29 18:25:35 发布
阅读量545 收藏 3
点赞数
分类专栏： 编程语言 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1234556667/article/details/120351676
版权

列表样式属性 

  • list-style-type:设置列表项标记的类型
  • list-style-image:设置列表项标记的图像
  • list-style-position:设置列表中列表项标志的位置
  • list-style:简写属性，用于把所有用于列表地属性设置于一个声明中

 列表样式

去掉列表项表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-style</title>
<style>
	h3{
		line-height: 32px;
		background: red url(image/arrow-down.gif) no-repeat 455px 10px;
	}
	ul li{
		line-height: 32px;
		background: #999 url(image/arrow-right.gif) no-repeat 418px 2px;
		list-style: none;  /*去掉列表项标记*/
	}
</style>
</head>
<body>
	<h3>每日菜单</h3>
	<ul>
		<li><a href="#">周一：黄焖鸡米饭</a></li>
		<li><a href="#">周二：过桥米线</a></li>
		<li><a href="#">周三：武汉热干面</a></li>
		<li><a href="#">周四：红烧牛肉盖饭</a></li>
		<li><a href="#">周五：兰州拉面</a></li>
	</ul>
</body>
</html>

超链接样式使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
	h3{
		line-height: 32px;
		background: red url(image/arrow-down.gif) no-repeat 455px 10px;
	}
	ul li{
		line-height: 32px;
		background: #999 url(image/arrow-right.gif) no-repeat 418px 2px;
		list-style: none;   /*去掉列表项标记*/
	}
	ul li a{
		color: #000;   /*超链接文本颜色为黑色*/
		text-decoration: none;  /*去掉超链接下划线*/
	}
	ul li a:hover{
		color: #fff;   /*当鼠标滑过某一行改变当前行的文本颜色为白色*/
	}
</style>
</head>
<body>
	<h3>每日菜单</h3>
	<ul>
		<li><a href="#">周一：黄焖鸡米饭</a></li>
		<li><a href="#">周二：过桥米线</a></li>
		<li><a href="#">周三：武汉热干面</a></li>
		<li><a href="#">周四：红烧牛肉盖饭</a></li>
		<li><a href="#">周五：兰州拉面</a></li>
	</ul>
</body>
</html>

盒子模型

 

  • 上图中，不同部分的解释如下
    • Margin（外边距）：清除边框外的区域，外边距是透明的
    • Border（边框）：围绕在内边距和内容外的边框
    • Padding（内边距）：清除内容周围的区域，内边距是透明的
    • Content（内容）：盒子的内容，显示文本和图像

1）网页元素与盒子之间的关系
在网页中，内容常指文字、图片等信息或元素，也可以是小盒子（嵌套结构），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏，而CSS盒子具有弹性，里面的东西大于盒子本身最多把它撑大，但它不会损坏。网页元素与盒子之间的关系如下图示

（2）解释各个属性
在上图中，不同部分的解释如下：

  • Margin（外边距）：清除边框外的区域，外边距是透明的
  • Border（边框）：围绕在内边距和内容外的边框
  • Padding（内边距）：清除内容周围的区域，内边距是透明的
  • Content（内容）：盒子的内容，显示文本和图像

而我们在制作网页时，主要就是去设置外边距、边框和内边距的样式，从而使整个盒子达到更加美观的效果。

实现边框样式 

使用<div>标签

  • <div> 标签可定义文档中的分区或节，它可以把文档分割为独立的、不同的部分。同时，它是一个块级元素。这意味着其内容会自动地开始一个新行
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><div>标签</title>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

宽高属性

  • 在CSS中，元素的宽度和高度分别使用width属性和height属性来指定
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>width和height属性</title>
	<style>
		div{
			width: 400px;  /*<div>标签宽度为400像素*/
			height: 400px;  /*<div>标签高度为400像素*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

     边框样式

  • border-style：设置边框的样式
  • border-width：设置边框的宽度
  • border-color：设置边框的颜色
  • border：简写属性，用于设置边框

  • border-style用于设置边框的样式，其属性值有很多，常用的有如下五个

 使用border-style属性设置<div>标签的边框样式为实线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-style属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

 边框宽度

  • border-width用于设置边框的宽度，常用属性值是指定长度值，如3px，5px，10px等

 设置<div>标签的边框宽度为10像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-width属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
			border-width: 10px;  /*<div>标签的边框宽度为10像素*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

 边框颜色

  • border-color用于设置边框的颜色，其属性值可以使用十六进制的方式定义，也可以使用RGB的方式定义，还可以使用颜色名称定义
  • 设置<div>标签的边框颜色为红色
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-color属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
			border-width: 10px;  /*<div>标签的边框宽度为10像素*/
			border-color: red;  /*<div>标签的边框颜色为红色*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

 边框样式

  • 在CSS中，为了简化属性的代码，可以将属性合并在同一个属性中。这个属性就是border，它就是边框样式的简写属性。当使用简写属性时，属性值的顺序为：
    • border-width
    • border-style
    • border-color
    • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border:10px solid red;  /*border简写属性：<div>标签边框样式为10像素的实线红色边框*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

      边框扩展 

    • 在CSS中，可以用top、right、bottom和left来指定不同方向的不同边框，以边框颜色（border-color）为例，来给<div>标签设置不同的边框颜色
    • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>四条边颜色不同</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border:10px solid;  /*border简写属性：<div>标签边框样式为10像素的实线*/
			border-top-color: red;      /*上边框颜色为红色*/
			border-right-color: green;  /*右边框颜色为绿色*/
			border-bottom-color: blue;  /*下边框颜色为蓝色*/
			border-left-color: yellow;  /*左边框颜色为黄色*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

       取值

    • 在CSS中，不同方向的边框颜色也可以设置为一个单一属性，如：
    • border-color: red green blue yellow;

    • border-color属性可以有1-4值
      • 当属性值有4个时：border-color: red green blue yellow;
        • 上边框是红色、右边框是绿色、下边框是蓝色、左边框是黄色
      • 当属性值有3个时：border-color: red green blue;
        • 上边框是红色、左右边框是绿色、下边框是蓝色
      • 当属性值有2个时：border-color: red green;
        • 上下边框是红色、左右边框是绿色
      • 当属性值有1个时：border-color: red;
        • 上、右、下、左四边均是红色

 实现盒子内外边距

外边距在网页中的应用

  • 为了整体网页的整洁美观，页面的每个区域并不是紧挨在一起的，它们之间都有一定的间距。以淘宝官网搜索区域和导航区域为例

内边距在网页中的应用 

  • 内容（如文本或图片）也不是紧挨在一起的，它们之间也有一定的空隙。以淘宝官网直播区域为例

 外边距

  • 在CSS中，元素的外边距由margin属性控制，margin定义了元素与其他相邻元素的距离。其与border属性一样，有top、right、bottom和left四个子属性用于设置不同方向的外边距，具体如下：
    • margin-top：设置上外边距
    • margin-right：设置右外边距
    • margin-bottom：设置下外边距
    • margin-left：设置左外边距

  • 使用margin属性设置4个盒子的外边距变化，通过不同方向上外边距的设置，从而设计一个梯状效果
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外边距的使用</title>
	<style>
		div{
			height: 20px;
			border:1px solid red;
		}
		/*第1个盒子的样式*/
		#box1{margin-top: 16px;margin-right: 12em;margin-left: 12em;}
		/*第2个盒子的样式*/
		#box2{margin-top: 8px;margin-right: 8em;margin-left: 8em;}
		/*第3个盒子的样式*/
		#box3{margin-top: 4px;margin-right: 4em;margin-left: 4em;}
		/*第4个盒子的样式*/
		#box4{margin-top: 2px;margin-right: 2em;margin-left: 2em;}
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<div id="box4"></div>
</body>
</html>

     外边距

  • 为了提高代码编写效率，CSS也为外边距提供了简写方式，具体说明如下：
    • 若四边的外边距相同，则直接使用margin属性定义1个值即可
      • 当属性值有1个时：margin: 10px;
    • 若四边的外边距不相同，则可以在margin属性中定义2个值、3个值或4个值
      • 当属性值有2个时：margin: 10px 20px;
      • 当属性值有3个时：margin: 10px 20px 30px;
      • 当属性值有4个时：margin: 10px 20px 30px 40px;

 实现网页居中对齐

  • 可以利用外边距实现网页居中对齐，其语法如下
  • margin: 0px auto;

  • 实现网页居中对齐有两个必要条件，分别是：
    • 必须是块元素
    • 必须固定宽度

 内边距

  • 在CSS中，内边距是用来调整元素包含的内容与元素边框的距离，其由padding属性控制。padding属性与margin属性一样，有top、right、bottom和left四个子属性用于设置不同方向的内边距，具体如下：
    • padding-top：设置上内边距
    • padding-right：设置右内边距
    • padding-bottom：设置下内边距
    • padding-left：设置左内边距

  • 使用padding属性在上个示例的基础上添加文本，并设置文本与元素边框的距离
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内边距的使用</title>
	<style>
		div{
			height: 20px;
			border:1px solid red;
		}
		/*第1个盒子的样式*/
		#box1{margin-top: 16px;margin-right: 12em;margin-left: 12em;padding-top: 30px;}
		/*第2个盒子的样式*/
		#box2{margin-top: 8px;margin-right: 8em;margin-left: 8em;
text-align: right;padding-right: 30px;}
		/*第3个盒子的样式*/
		#box3{margin-top: 4px;margin-right: 4em;margin-left: 4em;padding-bottom: 30px;}
		/*第4个盒子的样式*/
		#box4{margin-top: 2px;margin-right: 2em;margin-left: 2em;padding-left: 30px;}
	</style>
</head>
<body>
	<div id="box1">第1个盒子</div>
	<div id="box2">第2个盒子</div>
	<div id="box3">第3个盒子</div>
	<div id="box4">第4个盒子</div>
</body>
</html>

    扩展

  • 为了快速开发，可以在页面设计之初，用通配符选择器清除所有元素的内边距和外边距样式

 *{ padding:0; /*清除内边距*/ margin:0; /*清除外边距*/ }

了解网页中的浮动及定位

在浏览网页时，会发现网页都是由某些模块搭建起来从而形成了一个大页面

概念

  • 在CSS中， 浮动（float）会使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动元素之后的元素将围绕它，从而可以实现横排显示的效果

 块级元素和行内元素

  • 块级元素
    • 如<h1>、<p>、<div>等，它们的显示方式是占用全部宽度，元素独占一行
  • 行内元素
    • 如<img>、<a>、<span>等，它们的显示方式是由内容撑起宽度，不会以新行开始

 display属性

概念

  • 在CSS中，display属性可以设置一个元素应如何显示，其常用属性值如下
    • none：此元素不会被显示
    • block：此元素将显示为块级元素
    • inline：默认。此元素会被显示为行内元素
    • inline-block：行内块元素

 block元素特性

  • block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
  • block元素可以设置width和height属性。块级元素即使设置了宽度，仍然是独占一行
  • block元素也可以设置margin和padding属性

inline元素特性

  • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
  • inline元素的宽度是自身内容的宽度（默认有多少占多少）
  • inline元素设置width和height属性无效
  • inline元素的margin和padding属性，水平方向的padding-left、 padding-right、 margin-left、margin-right都产生边距效果；但竖直方向的padding-top、 padding-bottom、margin-top、margin-bottom不会产生边距效果

inline-block元素特性

  • 将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如可以给一个超链接（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性

display属性 

  • 在HTML中设置<div>、<p>和<span>三个标签，并修改它们的显示方式，来对比查看效果
  • <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>display属性</title>
  <style>
	*{padding:0;margin:0;}
	.contain{width:900px;margin:50px auto;}

	.block{display:block;background:red;}

	.inline{display:inline;background: blue;}

	.inline-b-box span{margin:20px;}
	.setW{width:300px;background:green;}
	.inline-block{display:inline-block;}

	.none{display:none;}

  </style>
 </head>
 <body>
	<!--演示display:block效果-->
	<div class="contain">
		<span>我是行内元素</span>
		<span>我是行内元素</span>
		<span class="block">我会变成块元素</span>
	</div>

	<!--演示display:inline效果-->
	<div class="contain">
		<p>我是块元素</p>
		<p>我是块元素</p>
		<p class="inline">我会变成行内元素</p>
		<p class="inline">我会变成行内元素</p>
	</div>

	<!--演示display:inline-block效果-->
	<div class="contain inline-b-box">
		<p class="setW">我是块元素<span>我是行内元素</span></p>
		<span class="inline-block">我会变成行内块元素，这样我就能设置margin-top和margin-bottom了</span>
	</div>
	
	<!--演示display:none效果-->
	<div class="contain">
		<p>我是块元素</p>
		<p>我是块元素</p>
		<p class="none">我会消失</p>
	</div>
 </body>
</html>

  • 第1个div包含三个span标签，它们用于演示“display:block”的效果，将原本为行内元素的最后一个span标签变为了块级元素，并设置红色背景；
  • 第2个div包含四个p标签，它们用于演示“display:inline”的效果，将原本为块级元素的最后两个p标签变为了行内元素，并设置蓝色背景；
  • 第3个div包含一个p标签，两个span标签，它们用于演示“display:inline-block”的效果，将原本为行内元素的最后一个span标签变为了行内块元素，并设置间距、宽度和绿色背景；
  • 第4个div包含三个p标签，它们用于演示“display:none”的效果，将原本为块级元素的p标签隐藏起来了。

 定位的使用

  • 在CSS中， position属性指定了元素的定位类型。其常用属性值有如下四个：
    • static：默认值，即没有定位
    • relative：相对定位
    • absolute：绝对定位
    • fixed：固定定位

  • 使用时，需要先给元素设置position属性，然后再设置top、right、bottom和left属性进行精准定位

 没有定位

概念

  • 在CSS中，“position: static”表示没有定位，元素将遵循正常的文档流布局，因此没有定位的元素不会受到top、right、bottom和left属性的影响

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有定位</title>
<style>
	div{
		width: 150px;
		height: 150px;
		border: 1px solid #000;
	}
	#box1{
		background: skyblue;
	}
	#box2{
		background: pink;
	}
	#box3{
		background: yellow;
	}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>

边框样式 

  • border-style：设置边框的样式
  • border-width：设置边框的宽度
  • border-color：设置边框的颜色
  • border：简写属性，用于设置边框

  • border-style用于设置边框的样式，其属性值有很多，常用的有如下五个
  • 使用border-style属性设置<div>标签的边框样式为实线
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-style属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

  • border-width用于设置边框的宽度，常用属性值是指定长度值，如3px，5px，10px等
  • 在上一示例的基础上，设置<div>标签的边框宽度为10像素
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-width属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
			border-width: 10px;  /*<div>标签的边框宽度为10像素*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

  • border-color用于设置边框的颜色，其属性值可以使用十六进制的方式定义，也可以使用RGB的方式定义，还可以使用颜色名称定义

  •  设置<div>标签的边框颜色为红色

  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-color属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border-style: solid;  /*<div>标签的边框样式为实线*/
			border-width: 10px;  /*<div>标签的边框宽度为10像素*/
			border-color: red;  /*<div>标签的边框颜色为红色*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

  • 在CSS中，为了简化属性的代码，可以将属性合并在同一个属性中。这个属性就是border，它就是边框样式的简写属性。当使用简写属性时，属性值的顺序为：
    • border-width
    • border-style
    • border-color

  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border属性</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border:10px solid red;  /*border简写属性：<div>标签边框样式为10像素的实线红色边框*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

  • 在CSS中，可以用top、right、bottom和left来指定不同方向的不同边框，以边框颜色（border-color）为例，来给<div>标签设置不同的边框颜色
  • 设置<div>标签的四个边颜色均不同，分别是红色、绿色、蓝色和黄色

  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>四条边颜色不同</title>
	<style>
		div{
			width: 400px;   /*<div>标签宽度为400像素*/
			height: 400px;   /*<div>标签高度为400像素*/
			border:10px solid;  /*border简写属性：<div>标签边框样式为10像素的实线*/
			border-top-color: red;      /*上边框颜色为红色*/
			border-right-color: green;  /*右边框颜色为绿色*/
			border-bottom-color: blue;  /*下边框颜色为蓝色*/
			border-left-color: yellow;  /*左边框颜色为黄色*/
		}
	</style>
</head>
<body>
	<div>
		<h3>多喝水的好处</h3>
		<p>平时要养成多喝水的习惯，可以起到加速人体新陈代谢，对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担，多喝水会加速尿液的排出，也可以有效的起到预防结石的作用。另外，如果身体出现有发热的情况，多喝水，多利尿也可以促进体温的下降，可以起到明显的散热的作用，而且还可以起到帮助消化的作用。</p>
	</div>
</body>
</html>

 边框扩展

 取值

  • 在CSS中，不同方向的边框颜色也可以设置为一个单一属性，如：
  • border-color: red green blue yellow;

  • border-color属性可以有1-4值
    • 当属性值有4个时：border-color: red green blue yellow;
      • 上边框是红色、右边框是绿色、下边框是蓝色、左边框是黄色
    • 当属性值有3个时：border-color: red green blue;
      • 上边框是红色、左右边框是绿色、下边框是蓝色
    • 当属性值有2个时：border-color: red green;
      • 上下边框是红色、左右边框是绿色
    • 当属性值有1个时：border-color: red;
      • 上、右、下、左四边均是红色

 圆角边框

概念

  • 在CSS3中， border-radius属性用于创建圆角边框，其属性值可以是1-4个值
    • 当属性值为1个值时：border-radius: 10px;
      • 左上角，右上角，右下角，左下角圆角边框均是10像素
    • 当属性值为2个值时：border-radius: 10px 20px;
      • 左上角和右下角边框圆角为10像素、右上角和左下角边框圆角为20像素
    • 当属性值为3个值时：border-radius: 10px 20px 30px;
      • 左上角边框圆角为10像素、右上角和左下角边框圆角为20像素、右下角边框圆角为30像素
    • 当属性值为4个值时：border-radius: 10px 20px 30px 40px;
      • 左上角边框圆角为10像素、右上角边框圆角为20像素、右下角边框圆角为30像素、左下角圆角边框为40像素

 圆角边框

在页面中创建4个盒子，并使用border-radius 属性分别设置1-4个属性值对比查看效

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
	div{
		width: 100px;
		height: 100px;
		background: red;
		float: left;
		margin: 0 10px;
	}
	div:nth-child(1){
		/*当属性值为1个值时，设置盒子1左上角，右上角，右下角，左下角圆角边框均是10像素*/
		border-radius: 10px;   
	}
	div:nth-child(2){
		/*当属性值为2个值时，设置盒子2左上角和右下角边框圆角为10像素、右上角和左下角边框圆角为20像素*/
		border-radius: 10px 20px;  
	}
	div:nth-child(3){
		/*当属性值为3个值时，设置盒子3左上角边框圆角为10像素，右上角和左下角边框圆角为20像素，右下角边框圆角为30像素*/
		border-radius: 10px 20px 30px;
	}
	div:nth-child(4){
		/*当属性值为4个值时，设置盒子4左上角边框圆角为10像素，右上角边框圆角为20像素，右下角边框圆角为30像素，左下角圆角边框为40像素*/
		border-radius: 10px 20px 30px 40px;
	}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</body>
</html>

圆角边框

实现圆形

  • 在CSS3中，使用border-radius 属性实现圆形需要注意的要点：
    • 元素的宽度和高度必须相同
    • 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

 图像边框

  • 在CSS3中，border-image属性用于指定一个图片作为边框
  • 实际上，border-image属性是复合属性，因此上述语法的属性值解释如下：
    • source表示border-image-source，用于指定要用于绘制边框的图像的位置
    • slice表示border-image-slice，用于设置图像边界向内偏移
    • width表示border-image-width，用于设置图像边界的宽度
    • outset表示border-image-outset，用于指定边框图像区域超出边框的量
    • repeat表示border-image-repeat，用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像边框</title>
<style>
	div{
		width: 150px;
		height: 150px;
		border: 10px solid;
		float: left;
		margin: 0px 10px;
	}
	#borderimg1{ 
		/*盒子1以图像铺满的方式填补边框*/
		border-image: url(images/border.png) 30 round;
	}
	#borderimg2{ 
		/*盒子2以图像拉伸的方式填补边框*/
		border-image: url(images/border.png) 30 stretch;
	}
</style>
</head>
<body>
<div id="borderimg1">盒子1</div>
<div id="borderimg2">盒子2</div>
</body>
</html>

 

 盒子阴影

  • 在CSS3中，box-shadow属性用于向元素添加阴影
  • box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：必需的。水平阴影的位置。允许负值
  • v-shadow：必需的。垂直阴影的位置。允许负值
  • blur：可选。模糊距离
  • spread：可选。阴影的大小
  • color：可选。阴影的颜色
  • inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

  • 结合box-shadow属性的语法，给div元素添加一个灰色阴影
  • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
	div{
		width: 150px;
		height: 150px;
		background: red;
		/*给div元素设置阴影效果是向右向下外面偏移，模糊距离为5像素，阴影颜色是灰色*/
		box-shadow: 10px 10px 5px #ccc;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

     渐变背景

  • 在CSS3中，新增了渐变背景，以去哪网头部区域为例
  • 线性渐变
  • 径向渐变
  • 在CSS3中，创建线性渐变必须至少定义两种颜色节点，颜色将沿着一条直线过渡
  • background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • 上述语法解释如下：
    • “background-image: linear-gradient”表示创建线性渐变
    • 参数一“direction”表示渐变方向
    • 参数二“color-stop1”表示第一种颜色值
    • 参数三“color-stop2”表示第二种颜色值，后面还可定义多个颜色值
  • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
	div{
		width: 200px;
		height: 300px;
		float: left;
		margin:0px 10px;
	}
	#box1{
		/*从上到下的线性渐变*/
		background: linear-gradient(red,blue);
	}
	#box2{
		/*从左到右的线性渐变*/
		background: linear-gradient(to right,yellow,green);
	}
	#box3{
		/*从左上角开始到右下角的线性渐变*/
		background: linear-gradient(to bottom right,pink,orange);
	}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>

  • 多颜色渐变

  • 根据语法创建线性渐变，并设置多个颜色查看效果

  • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多颜色渐变</title>
<style>
	div{
		width: 200px;
		height: 300px;
		float: left;
		margin:0px 10px;
	}
	#box1{
		/*从上到下的3个颜色的线性渐变*/
		background: linear-gradient(red,green,blue);
	}
	#box2{
		/*从上到下的7个颜色的线性渐变*/
		background: linear-gradient(red,orange,yellow,green,cyan,blue,purple);
	}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
</body>
</html>

  • 径向渐变

  • 在CSS3中，创建径向渐变必须至少定义两种颜色节点，同时，也可以指定渐变的位置、形状（圆形或椭圆形）和大小。默认情况下，渐变的位置是center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）
  • background-image: radial-gradient(shape size at position, start-color, ..., last-color);

  • 上述语法解释如下：
    • “background-image: radial-gradient”表示创建径向渐变
    • “shape”表示渐变的形状，ellipse椭圆形和circle圆形，默认值是ellipse
    • “size”表示渐变的大小
    • “position”表示渐变的位置，可选值有center（默认），top，bottom
    • “ start-color, ..., last-color”表示渐变的有效颜色值和可选的位置值
    • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
	div{
		width: 200px;
		height: 150px;
		float: left;
		margin:0px 10px;
	}
	#box1{
		/*颜色节点均匀分布的径向渐变*/
		background-image: radial-gradient(red, green, blue);
	}
	#box2{
		/*颜色节点不均匀分布的径向渐变*/
		background-image: radial-gradient(red 5%, green 15%, blue 60%);
	}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
</body>
</html>

    • 将渐变的形状改变为圆形
    • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置形状</title>
<style>
	div{
		width: 200px;
		height: 150px;
		float: left;
		margin:0px 10px;
	}
	#box1{
		/*颜色节点均匀分布的径向渐变*/
		background-image: radial-gradient(circle,red, green, blue);
	}
	#box2{
		/*颜色节点不均匀分布的径向渐变*/
		background-image: radial-gradient(circle,red 5%, green 15%, blue 60%);
	}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
</body>
</html>

    •  CSS3美化网页字体

    • 会使用text-shadow属性实现文本阴影效果
    • 了解text-overflow属性的使用
    • 会使用word-wrap属性实现文本换行

 文本阴影

  • 在CSS3中，text-shadow属性用于设置文本阴影，其基本语法如下

text-shadow: h-shadow v-shadow blur color;
  • h-shadow：必需的。水平阴影的位置。允许负值
  • v-shadow：必需的。垂直阴影的位置。允许负值
  • blur：可选。模糊距离
  • color：可选。阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-shadow属性</title>
	<style>
	  h1{
	    text-shadow:5px 5px 5px #FF0000;
	  }
	</style>
</head>
<body>
	<h1>欢迎学习Web前端课程</h1>
</body>
</html>

文本溢出

  • 在CSS3中，text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么
    • 当属性值为“clip”时，表示当文本溢出包含它的元素时修剪文本
    • 当属性值为“ellipsis”时，表示当文本溢出包含它的元素时显示省略符号
    • 当属性值为“string”时，表示当文本溢出包含它的元素时使用给定的字符串
  • 通过text-overflow属性指定溢出文本使用省略号显示
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-overflow属性</title>
	<style>
	  h2{
	    width: 350px;
	    line-height: 50px;
	    border: 1px #ccc solid;
	    text-overflow:ellipsis;
	  }
	</style>
</head>
<body>
	<h2>text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么</h2>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-overflow属性</title>
	<style>
	  h2{
		width: 350px;
		line-height: 50px;
		border: 1px #ccc solid;
		text-overflow:ellipsis;
		white-space: nowrap;
		overflow: hidden;
	  }
	</style>
</head>
<body>
	<h2>text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么</h2>
</body>
</html>

  • 实现溢出文本显示省略号有三条必要属性：
    • overflow:hidden; //溢出的文本隐藏
    • text-overflow:ellipsis; //溢出文本用省略号显示
    • white-space:nowrap; //溢出不换行

 文本换行

  • 在CSS3中，word-wrap属性用于允许长的内容可以自动换行
    • 当属性值为“normal”时，表示只在允许的断字点换行（即浏览器保持默认处理）
    • 当属性值为“break-word”时，表示在长单词或 URL 地址内部进行换行

  • 通过word-wrap属性给“thisisaveryveryveryveryveryverylongword”长单词换行
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>word-wrap属性</title>
	<style>
	  p:nth-child(1){
		width: 200px;
		border: 1px solid #000;
	  }
	  p:nth-child(2){
		width: 200px;
		border: 1px solid #000;
		word-wrap:break-word;
	  }
	</style>
</head>
<body>
	<p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
	<p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

 实现网页元素转换

  • CSS3 2D转换是移动、旋转、缩放和倾斜效果的集合，通过它可以操控元素发生变化
  • transform:[transform-function] ;

  • translate()：表示移动，基于X、Y坐标重新定位元素的位置
  • rotate()：表示旋转，取值是一个度数值
  • scale()：表示缩放，可以使任意元素对象尺寸发生变化
  • skew()：表示倾斜，取值是一个度数值
  • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原始代码</title>
<style>
	div{
		width: 200px;
		height: 200px;
		background: red;
	}
</style>
</head>
<body>
	<div></div>
</body>
</html>

    2D移动

  • translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
  • 在原始代码的基础上使用translate()方法将div元素在X轴移动50像素，Y轴移动100像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			/*在X轴移动50像素，Y轴移动100像素*/
			transform:translate(50px,100px);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

  • rotate()方法，根据给定的度数，使当前元素进行旋转。当取值为正数时，元素相对原来中心顺时针旋转；当取值为负数时，元素相对原来中心逆时针旋转
  • 在上一示例的基础上将移动后的元素再使用rotate()方法顺时针旋转30度

 缩放

  • scale()方法，通过设置宽度（X轴）和高度（Y轴）的参数，增加或减少元素的大小
  • 在原始代码的基础上使用scale()方法将div元素宽度增加2倍，高度增加3倍

 

 倾斜

  • skew()方法，通过设置X轴和Y轴的参数，使元素倾斜
  • 在移动元素示例的基础上将移动后的元素再使用skew()方法在X轴和Y轴上倾斜20度30度

 

 CSS3过度

  • 在CSS3中，过渡是元素从一种样式逐渐改变为另一种的效果
  • transition:transition-property|transition-duration|transition-timing-function|transition-delay

  • transition：简写属性，用于在一个属性中设置四个过渡属性
  • transition-property：用于指定过渡的CSS属性的名称
  • transition-duration：定义过渡效果花费的时间
  • transition-timing-function：定义过渡效果的时间曲线
  • transition-delay：定义过渡效果何时开始

  • 在CSS3中，transition-property用于指定过渡的CSS属性的名称
    • property：指定的CSS属性（如width、height、background属性等），以逗号分隔
    • all：指定所有元素都将获得过渡效果，一般为了方便都会使用all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡属性</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			transition-property: all;  /*表示所有元素都将获得过渡效果*/
		}
		div:hover{
			background: blue;
			width: 500px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

 过渡时间、

  • 在CSS3中，transition-duration用于定义过渡效果花费的时间，其属性值是秒或毫秒，默认值是 0，意味着不会有效果
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡所需时间</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			transition-property: all;  /*表示所有元素都将获得过渡效果*/
			transition-duration: 3s;  /*过渡所需时间为3秒*/
		} 
		div:hover{
			background: blue;
			width: 500px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

     过渡动画

  • 在CSS3中，transition-timing-function用于定义过渡效果的时间曲线
    • linear：规定以相同速度开始至结束的过渡效果
    • ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
    • ease-in：规定以慢速开始的过渡效果
    • ease-out：规定以慢速结束的过渡效果
    • ease-in-out：规定以慢速开始和结束的过渡效果
  • 在上一示例的基础上，设置过渡动画以慢速开始
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡动画</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			transition-property: all;  /*表示所有元素都将获得过渡效果*/
			transition-duration: 3s;  /*过渡所需时间为3秒*/
			transition-timing-function: ease-in;  /*规定以慢速开始的过渡效果*/
		} 
		div:hover{
			background: blue;
			width: 500px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

    过度延迟

  • 在CSS3中，transition-delay用于定义过渡效果何时开始，其属性值是秒或毫秒，默认值是 0，意味着过渡效果立即执行
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡延迟时间</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			transition-property: all;  /*表示所有元素都将获得过渡效果*/
			transition-duration: 3s;  /*过渡所需时间为3秒*/
			transition-timing-function: ease-in;  /*规定以慢速开始的过渡效果*/
			transition-delay: 3s;   /*过渡延迟时间为3秒*/
		} 
		div:hover{
			background: blue;
			width: 500px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

    过渡简写

  • 在CSS中，为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。这个属性就是transition，它就是过渡效果的简写属性
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡简写属性</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			transition: all 3s ease-in 3s;
		} 
		div:hover{
			background: blue;
			width: 500px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

  • 在CSS3中，使用animation实现动画主要由两个部分组成，分别是：
    • 使用@keyframes定义关键帧
    • 在animation属性中调用关键帧声明的动画

 区别

  • transition只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画
  • animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果

  • 在CSS3中，使用animation实现动画主要由两个部分组成，分别是：
    • 使用@keyframes定义关键帧
    • 在animation属性中调用关键帧声明的动画

区别 

  • transition只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画
  • animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果

 定义关键帧

  • 在CSS3中，使用@keyframes定义关键帧
  • @keyframes  animationname  {
   keyframes-selector{
       css-styles;
   }
}

    参数说明

  • animationname：定义动画的名称
  • keyframes-selector：定义帧的时间，即动画时长的百分比，合法的值包括0~100%或用关键词“from”和“to”，等同于 0% 和 100%
  • css-styles：表示一个或多个CSS样式属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定义关键帧</title>
	<style>
		/*大方盒样式*/
		#bigBox{
			width: 250px;
			height: 250px;
			border: 1px solid red;
			/*定义定位包含框，避免小方盒跑到外面运动*/
			position: relative; 
		}
		/*小方盒样式*/
		#smallBox{
			width: 50px;
			height: 50px;
			background: green;
			box-shadow: 2px 2px 2px #999;
			border-radius: 8px;
			position: absolute;
			left: 0;
			top: 0;
		}
		/*定义关键帧*/
		@keyframes ball{
			0%{left: 0;top: 0;}
			25%{left: 200px;top: 0;}
			50%{left: 200px;top: 200px;}
			75%{left: 0;top: 200px;}
			100%{left: 0;top: 0;}
		}
	</style>
</head>
<body>
	<div id="bigBox">
		<div id="smallBox"></div>
	</div>
</body>
</html>

 调用关键帧

  • 在CSS3中，使用animation属性可以调用关键帧声明的动画
  • animation: name duration timing-function delay iteration-count direction play-state fill-mode;

    定义动画名称

  • 使用animation-name属性可以定义CSS动画名称
  • animation-name: keyframename|none;

    定义动画时间

  • 使用animation-duration属性可以定义CSS动画播放时间
  • animation-duration: time;

    定义动画类型

  • 使用animation-timing-function属性可以定义CSS动画类型
  • animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out

    定义延迟时间

  • 使用animation-delay 属性可以定义CSS动画延迟播放的时间
  • animation-delay : time;

    定义播放次数

  • 使用animation-iteration-count属性定义CSS动画的播放次数
  • animation-iteration-count:n|infinite

  • 播放次数默认值为1，当取值为n（一个数字）时，表示动画应该被播放多少次；当取值为“infinite”时，表示无限次，即动画永远重复

 定义播放方向

  • 使用animation-direction属性定义CSS动画的播放方向
  • animation-direction: normal|reverse|alternate|alternate-reverse

  • 播放方向默认值为normal，表示动画按正常播放，当取值为“reverse”时，表示动画反向播放；当取值为“alternate”时，表示动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放；当取值为“alternate-reverse”时，表示动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

 定义播放状态

  • 使用animation-play-state属性定义动画正在运行，还是暂停
  • animation-play-state: paused|running;

  • 默认值为running，表示动画正在播放，当取值为“paused”时，表示动画已暂停

 定义播放外状态

  • 使用animation-fill-mode属性定义动画外状态
  • animation-fill-mode: none|forwards|backwards|both

  • none：不设置对象动画之外的状态
  • forwards：设置对象状态为动画结束时的状态
  • backwards：设置对象状态为动画开始时的状态
  • both：设置对象状态为动画结束或开始的状态

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>调用关键帧</title>
	<style>
		/*大方盒样式*/
		#bigBox{
			width: 250px;
			height: 250px;
			border: 1px solid red;
			/*定义定位包含框，避免小方盒跑到外面运动*/
			position: relative; 
		}
		/*小方盒样式*/
		#smallBox{
			width: 50px;
			height: 50px;
			background: green;
			box-shadow: 2px 2px 2px #999;
			border-radius: 8px;
			position: absolute;
			left: 0;
			top: 0;
/*调用关键帧*/
			animation:ball 5s linear infinite;
		}
		/*定义关键帧*/
		@keyframes ball{
			0%{left: 0;top: 0;}
			25%{left: 200px;top: 0;}
			50%{left: 200px;top: 200px;}
			75%{left: 0;top: 200px;}
			100%{left: 0;top: 0;}
		}
	</style>
</head>
<body>
	<div id="bigBox">
		<div id="smallBox"></div>
	</div>
</body>
</html>

撸码的xiao摩羯
关注
专栏目录
CSS学习之链接,列表,表格,盒子模型,边框
Logbook的博客
04-01 541
CSS链接 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 链接顺序: a:hover 必须在 a:link 和 a:visited 之后，...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
weixin_39672443的博客
06-07 5818
目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...
列表和盒子模型
YDesire的博客
07-11 479
列表和盒子模型有序列表&lt;ol&gt;标签：&lt;ol&gt;中只能是&lt;li&gt;标签无序列表&lt;ul&gt;标签：只能以&lt;li&gt;作为子标签无序列表常用于实现树形列表定义列表&lt;dl&gt;&lt;dt&gt;:标题&lt;dd&gt;:描述&lt;/dl&gt;列表样式2-1list-style-typenone:无标记符号dis
day7表格属性+盒模型
weixin_58459702的博客
07-23 186
day7表格属性+盒模型
css基础-盒子模型+背景和列表
zhoumouren88的博客
08-18 213
border-style的值： none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin： 垂直方向两个相邻元素都设置了外边距，那么外边距会发生合并 合并高度=两个发生合并的外边距中的较大值 元素的实际高度=上边框+上内边距+内容高度+下内边距+下边框 元素在页面中实际所占的高度是：上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距 hover属性实现鼠标悬停时显示子元素： <!DOCTYPE html...
CSS中的列表属性+盒子模型+浮动
ZZY192921533的博客
04-05 261
CSS中的列表属性+盒子模型+浮动
table布局 文本格式 字体、列表样式 背景属性 盒子模型 定位
qq_40571091的博客
09-16 886
内容大纲 整个页面的布局可以用到table来布局，还可以用div+CSS来对页面进行布局，相对于table布局来说，div+CSS将网页分为内容和表现形式，更利于后期整个网站的维护，一般只要修改css文件中的一个css属性就可以修改页面的样式，可以提高网页的打开速度，这是特性决定了他们的性能，因为浏览器打开网页的时候是同时下载html和css的，这样可以边加载边显示内容，而对于table布局来说...
CSS——文档流及盒子模型样式设置
asdfg2047的博客
06-24 282
目录1、文档流2、盒子模型3、盒子边框4、盒子内边距5、外边距6、默认样式文档流（normal flow） 网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层 文档流是网页最底层 我们创建的元素默认情况下，都在文档流中 元素分为两种状态：在文档流中，脱离文档流 元素在文档流中的特点 块元素 1:会独占一行 2:块元素
css盒子模型 css margin 外边框合并
12-01
CSS 盒子模型是网页设计中理解元素布局的基础，它定义了元素的四个部分：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域是元素实际显示的数据部分，内边距是内容与边框之间的...
初识HTML（五）进阶：CSS盒子模型、页面布局
Simple子夜
03-13 1万+
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型： 元素的宽度和高度 重点: 当你指定一个 CSS 元素的宽度和高度属性时
亲爱的老狼-列表符号怎么放在盒子里
m0_60450677的博客
08-16 291
解决这个问题的方法有两种： 1>一种是直接padding-left=“ 大小 ”，把盒子撑开，把内容裹进去 2>一种是先消去符号list-style=“none”，再单独在需要的列表上加上list-style=“符号”，列表和符号就会自动被盒子裹进去。 ...
web前端学习（十七）——CSS3列表属性（list-style）的相关设置
★★光亭★★
01-26 1万+
web前端学习（十七）——CSS3列表属性（list-style）的相关设置
html list-style的作用,list-style是什么意思?list-style样式属性详解
热门推荐
weixin_34308792的博客
06-20 1万+
本篇文章给大家带来的内容是关于list-style是什么意思?list-style样式属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、list-style作用与用处list-style是设置列表li的样式。比如li前面为阿拉伯数字、圆点、实心圆、图片、空心圆、小写英文字母、大写英文字母、传统的亚美尼亚数字等。二、语法1、语法：list-style : list-styl...
css设置悬浮列表样式_如何使用CSS设置列表样式
08-14 710
css设置悬浮列表样式 HTML列表回顾 (HTML Lists Recap) There are two main types of lists in HTML — Ordered and Unordered. HTML中的列表主要有两种类型： Ordered和Unordered 。 In Ordered lists (<ol></ol>), the order of ...
玩转CSS列表：超越常规的美化与布局技巧
最新发布
艾恩小灰灰的博客
04-29 960
CSS的属性允许我们改变列表项的默认标记，但通过结合伪元素（:before）和内容属性（content），我们可以创造无限可能。
初学css list-style属性
weixin_30500289的博客
05-28 460
网上很多css布局中会看到这样的一句:list-style：none； 那么list-style到底什么意思？中文即：列表样式：无； 其实它是一个简写属性，包含了所有列表属性，具体包含list-style-type、list-style-position、list-style-image list-style-type：设置列表项标记的类型。我们使用ul->li或是ol->li...
CSS盒子模型及属性
weixin_45623361的博客
08-01 852
边框属性 1边框样式boder-style 在CSS属性中，boder-style属性用于设置边框样式 语法结构： border-style: 上边[右边 下边 左边]; 在设置边框样式时既可以针对四条边分别设置，也可以综合设置四条边的样式。boder-style属性的常用属性值有4个，分别用于定义不同的显示样式，具体如下。 solid 边框为单实线 dashed 边框为虚线 dotted 边框为点线 double 边框为双实线 使用boder-style 属性综合设置四边样式时，必须.
CSS盒模型篇
weixin_44908855的博客
06-21 374
1. 盒模型概述 box:盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型：块盒、行盒、行块盒 2. 块盒（块级元素） 块盒：display：bolck 每个块元素通常都会独自占据一整行或多整行 可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建 总是从新行开始 高度，行高、外边距以及内边距都可以控制。 宽度默认是容器的100% 可以容纳内联元素和其他块元素。 序号
盒子模型详解（新手入门）
MSLwu的博客
02-22 1517
盒模型详解 很多在学习前端初级阶段的小白对盒子模型的学习可谓是抓破了头脑，今天跟着小T的步伐，梳理知识点，解决你的困扰！ 什么叫盒子模型？ 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 盒模型的组成：内容区、补白/填充、边框、边界/外边距。 盒子平面图 css盒子模型属性（内部到外部布局） css盒子有：内容（c...
CSS基础知识：盒子模型与元素关系解析
除此之外，CSS还涉及文字样式、图像处理、链接和导航的设计、项目列表的美化、圆角效果、固定宽度及响应式布局、分列布局的背景处理等多种技巧。通过学习这些知识点，开发者能够创造出美观且功能丰富的网页界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

撸码的xiao摩羯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值