CSS 教程 在线

2625CSS3 教程

CSS3是CSS技术的升级版本2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等模块

2535CSS3 弹性盒子

块元素垂直居中问题采用 flex 解决。

行内元素垂直居中问题解决如下:

1)单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2)多行

设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;

446CSS3 动画

绘制太阳系各大行星运行轨迹:

<div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune'></div>
</div>

尝试一下 »

445CSS3 过渡

简单的鼠标悬浮过渡效果:

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

尝试一下 »

444CSS3 文本效果

写 box-shadow 的依次顺序为:

h-shadow   v-shadow   blur   spread   color   insect

水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影