整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

仿抖音3d立体图片音乐盒用vue、css、js的ht

仿抖音3d立体图片音乐盒用vue、css、js的html制作及代码分析

说明:

1.1 拿来即能用,老少男女皆可为,适合为自己或者女朋友或老婆、男朋友或老公,小孩,老人制作有音乐的3d图片展示。

1.2 推荐指数:★★★★

1.3 适合收藏,代码已经亲测过,建议谷歌浏览器,其他浏览器没测试,+微软vscode编辑器。


2 效果


3 准备工作:

3.1 图片准备:6张jpg图片:命名为:jt1~6,即jt1.jpg,jt2.jpg,jt3.jpg......,放在文件夹img中。

3.2 背景音乐准备:选一个喜欢的背景音乐:简单一点就是命名为:tiantian.mp3(和我一样,这样图片和音乐都不需要去修改代码)。

3.3 vue.js文件需要去官网下载,也可以直接引用,建议下载比较好,因为断网也能使用。

3.3.1 直接引用如下:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.3.2 下载vue.js,以前说过怎么办?复习一下。

复制上面的网页地址,你懂的,到浏览器中打开,按ctrl+a全选,复制到本地,新建一个txt,黏贴上去,保存,再重新命名为:vue.js,即可。


4.如上图,图片、背景音乐、vue.js准备好了。

========================

接下来是代码部分:一个一个来

========================

5.index.html代码:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue.js立方体旋转播放特效</title>
<!--注意引入js和css文件,但是后面还有一个vueapp.js文件放在后面引用-->
<script src="./vue.js"></script>
<link rel="stylesheet" href="./3dbox.css">
<link rel="stylesheet" href="./gunball.css">
</head>
<body>
    <!--gunball设置-->
	<div class="container">
		<div class="cube cube--1">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--2">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--3">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
	</div>

	<!--音乐盒div-->
	<div id="app">
		<div class="main">
			<ul class="box" id="box" :class="infoShow?'play':'pause'">
				<li v-for="(item,index) in list" :key="item.index" :class="{imgOpen:item.imgShow}">
					<img :src="item.imgUrl" />
				</li>
			</ul>
			<dl class="minBox" id="minBox">
				<dd v-for="(item,index) in list" :key="item.index">
					<img :src="item.imgUrl" />
				</dd>
			</dl>
		</div>
		<audio src="./tiantian.mp3" ref="vd"></audio>
        <!--音乐和图片展示动画开关-->
		<div class="content-info" @click="cirClick">
			<span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'关闭':'打开'}}</span>
		</div>
	</div>
</body>
<!--音乐盒的vue设置,必须放在音乐盒div后面这里引用-->
<script src="./vueapp.js"></script>
</html>

6 vueapp.js文件代码:

var app=new Vue({
		el: "#app",
		data() {
			return {
				list: [
					{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },
					{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },
					{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },
					{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },
					{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },
					{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }
				],
				openShow: false,
				mirrorNum: 0,
				imgTimer: null,
				rotateY: 0,
				imgIndex: -1,
				listTimer: null,
				boxTimer: null,
				infoShow: false,
				miaoTimer: null,
				catSpeed: 0,
				catTimer: null,
				closeSpeed: -1,
				closeTimer: null
			}
		},
		mounted: function() {},
		methods: {
			imgMove() {
				var oBox=document.getElementById('box');
				var oMinBox=document.getElementById('minBox');
				this.boxTimer=setInterval(()=> {
					this.rotateY +=3;
					oBox.style.transform='perspective(800px) translateZ(-20px)  rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';
					oMinBox.style.transform='perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';
				}, 200)
			},
			cirClick() {
				this.infoShow=!this.infoShow
				var oBox=document.getElementById('box');
				var aPupil=document.getElementsByClassName('pupil')
				var oCat=document.getElementById('cat');
				var aLi=oBox.getElementsByTagName('li');
				if(this.infoShow) {
					clearInterval(this.imgTimer);
					this.imgTimer=setInterval(()=> {
						this.imgIndex++;
						this.list[this.imgIndex].imgShow=true;
						if(this.imgIndex >=5) {
							clearInterval(this.imgTimer);
							this.imgIndex=0
						}
					}, 300);
					this.imgMove();
					for(var i=0; i < aPupil.length; i++) {
						aPupil[i].style.top='7px',
							aPupil[i].style.left='30px'
					}
					this.$refs.vd.play()
					this.catTimer=setInterval(()=> {
						var catNum=parseInt(this.$refs.vd.duration) / 2
						if(parseInt(this.$refs.vd.currentTime) >=catNum) {
							this.catSpeed -=10;
						} else {
							this.catSpeed +=10;
						}
						if(parseInt(this.$refs.vd.currentTime) >=parseInt(this.$refs.vd.duration)) {
							clearInterval(this.catTimer);
							this.infoShow=false;
							clearInterval(this.boxTimer);
							for(var i in this.list) {
								this.list[i].imgShow=false;
							}
						}
						oCat.style.transform='perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';
					}, 300)
				} else {
					clearInterval(this.boxTimer);
					clearInterval(this.imgTimer);
					clearInterval(this.catTimer);
					for(var i=0; i < aPupil.length; i++) {
						aPupil[i].style.top='28px',
							aPupil[i].style.left='0px'
					}
					this.$refs.vd.pause();
					for(var i in this.list) {
						this.list[i].imgShow=false;
					}
				}
			}
		}
	})

7 3dbox.css文件的代码:

* {
	margin: 0px;
	padding: 0px;
}

/*3d正方体的图片大小画布设置*/
.main {
	width: 400px;
	height: 400px;
	margin: 0px auto;
	position: relative;
}
/*音乐盒=3d正方体大小设置*/
.box {
	transform-style: preserve-3d;
	position: absolute;
	width: 240px;
	height: 240px;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -120px;
	transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
	z-index: 5;
	animation: imgMove 5s linear;
}
/*图片动画设置*/
@keyframes imgMove {
	0%{
		transform: rotateX(-20deg)rotateY(-20deg);
	}
	30%{
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	60% {
		transform: rotateX(-160deg)rotateY(-160deg);
	}
	90% {
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	120%{
		transform: rotateX(-320deg)rotateY(-320deg);
	}
	150%{
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	180% {
		transform: rotateX(-180deg)rotateY(-180deg);
	}
	210% {
		transform: rotateX(-120deg)rotateY(-120deg);
	}
	240% {
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	300% {
		transform: rotateX(-60deg)rotateY(-60deg);
	}
	360% {
		transform: rotateX(-20deg)rotateY(20deg);
	}
}

.box li {
	list-style: none;
	width: 240px;
	height: 240px;
	position: absolute;
	opacity: 0.8;
}
.box li img {
	width: 240px;
	height: 240px;
	vertical-align: middle;
}
.box li:nth-child(1) {
	transform: translateZ(120px);
	-webkit-transform: translateZ(120px);
}
.box li:nth-child(2) {
	transform: rotateX(90deg) translateZ(120px);
	-webkit-transform: rotateX(90deg) translateZ(120px);
}
.box li:nth-child(3) {
	transform: translateZ(-120px);
	-webkit-transform: translateZ(-120px);
}
.box li:nth-child(4) {
	transform: rotateX(90deg) translateZ(-120px);
	-webkit-transform: rotateX(90deg) translateZ(-120px);
}
.box li:nth-child(5) {
	transform: rotateY(90deg) translateZ(120px);
	-webkit-transform: rotateY(90deg) translateZ(120px);
}
.box li:nth-child(6) {
	transform: rotateY(90deg)translateZ(-120px);
	-webkit-transform: rotateY(90deg)translateZ(-120px);
}
.box .imgOpen {
	opacity: 0.6;
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}
.minBox {
	transform-style: preserve-3d;
	position: absolute;
	width: 120px;
	height: 120px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -30px;
	transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}
.minBox dd {
	width: 120px;
	height: 120px;
	position: absolute;
	z-index: 4;
}
.minBox dd img {
	width: 120px;
	height: 120px;
	vertical-align: middle;
}
.minBox dd:nth-child(1) {
	transform: translateZ(60px);
	-webkit-transform: translateZ(60px);
}
.minBox dd:nth-child(2) {
	transform: rotateX(90deg) translateZ(60px);
	-webkit-transform: rotateX(90deg) translateZ(60px);
}
.minBox dd:nth-child(3) {
	transform: translateZ(-60px);
	-webkit-transform: translateZ(-60px);
}
.minBox dd:nth-child(4) {
	transform: rotateX(90deg) translateZ(-60px);
	-webkit-transform: rotateX(90deg) translateZ(-60px);
}
.minBox dd:nth-child(5) {
	transform: rotateY(90deg) translateZ(60px);
	-webkit-transform: rotateY(90deg) translateZ(60px);
}
.minBox dd:nth-child(6) {
	transform: rotateY(90deg)translateZ(-60px);
	-webkit-transform: rotateY(90deg)translateZ(-60px);
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}

/*音乐和图片展示的开关设置*/
.play {
	animation-play-state: running !important;
}
.pause {
	animation-play-state: paused !important;
}

.content-info {
	/*开关的文字宽度设置*/
	width: 300px;
	text-align: center;
	/*字体大小设置*/
	font-size: 100px;
	position: absolute;
	left:300px;
	transform-style: preserve-3d;
	transform: perspective(800px) scale(0.3) translateZ(-20px);
}

8 gunball.css文件的代码:

BODY {
  /*body的设置是全局的,也会影响到正方体音乐图片的展示*/
  -webkit-perspective: 40em;
          perspective: 40em;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  overflow: hidden;
  /*注意这个字体大小,不仅仅设置gunball的大小,也影响音乐盒的图片展示*/
  font-size: 14px;
  background: #000;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-size: 1em 10%;
}

.container {
  width: 15em;
  height: 15em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 12s infinite linear;
          animation: rotate 12s infinite linear;
}

.cube {
  /*保持gunball大小不变形*/
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube--2 {
  -webkit-transform: rotateX(45deg) rotateY(45deg);
          transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
          transform: rotateX(45deg) rotateZ(45deg);
}

.side {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border: 2px dotted rgba(255, 213, 0, 0.35);
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.side::before, .side::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side::before {
  width: 0.5em;
  height: 0.5em;
  color: gold;
}
.side::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(-1em);
          transform: translateZ(-1em);
  box-shadow: inset 0 0 1em, 0 0 1em;
  color: teal;
}

.side--back {
  -webkit-transform: translateZ(-2em) rotateY(180deg);
          transform: translateZ(-2em) rotateY(180deg);
}

.side--left {
  -webkit-transform: translateX(-2em) rotateY(-90deg);
          transform: translateX(-2em) rotateY(-90deg);
}

.side--right {
  -webkit-transform: translateX(2em) rotateY(90deg);
          transform: translateX(2em) rotateY(90deg);
}

.side--top {
  -webkit-transform: translateY(-2em) rotateX(90deg);
          transform: translateY(-2em) rotateX(90deg);
}

.side--bottom {
  -webkit-transform: translateY(2em) rotateX(-90deg);
          transform: translateY(2em) rotateX(-90deg);
}

.side--front {
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
}

.side__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em;
  color: orangered;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side__inner::before {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: crimson;
}
.side__inner::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: purple;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

BODY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

9 注意几个问题:

9.1 vueapp.js为什么只能放在后面引用,前面引用行不行?感兴趣的可以去试试。

9.2 vue.js布局和纯html布局的不同,可以思考思考。

9.3 不想思考也没事,拿来就可以使用。注意背景音乐的命名:tiantian.mp3,6张图片命名:jt1.jpg,复制vue.js即可。简单使用,小白就会。

分享出来。

SS 盒子模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。

  • Content(内容) - 盒子的内容,显示文本和图像。

为了在所有浏览器中的元素的宽度和高度设置正确的话,你需要知道的盒模型是如何工作的。


元素的宽度和高度

重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.

下面的例子中的元素的总宽度为300px:

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

让我们自己算算:

250px (宽)

+ 20px (左 + 右填充)

+ 10px (左 + 右边框)

+ 20px (左 + 右边距)

=300px

试想一下,你只有250像素的空间。让我们设置总宽度为250像素的元素:

实例

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距


浏览器的兼容性问题

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

一、盒模型概述

在“CSS盒子模型”理论中,所有页面中的元素都可以看成一个盒子,并且占据着一定的页面空间。

盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。

属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系。

二、标准盒模型结构图

三、盒模型属性

border (边框)元素边框

margin (外边距)用于定义页面中元素与元素之间的距离

padding (内边距)用于定义内容与边框之间的距离

content (内容)可以是文字或图片

1、内容区

内容区是CSS盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他的3部分都是可选的。

内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区而言,并不包括padding部分。

当内容信息太多时,超出内容区所占范围时,可以使用overflow溢出属性来指定处理方法。对于overflow这个属性,我们在后面会详细讲解到。

2、内边距

内边距,指的是内容区和边框之间的空间,可以被看做是内容区的背景区域。

关于内边距的属性有4种,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。

3、边框

在CSS盒子模型中,边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

其中border-width指定边框的宽度,border-style指定边框类型,border-color指定边框的颜色。

“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

4、外边距

外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。

外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。

外边距的属性也有4种,即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

5.属性的简写形式:

方法是按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:

* 如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性,如padding:20px 30px;/*上下、左右*/;

*如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性,如padding:30px 20px 10px;/*上、左右、下*/;

*如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序,如padding:30px 20px 10px 40px;/*上、右、下、左*/。

课后练习: