CSS3是CSS技术的升级版本2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等模块
块元素垂直居中问题采用 flex 解决。
行内元素垂直居中问题解决如下:
1)单行
该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
2)多行
设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;。
绘制太阳系各大行星运行轨迹:
<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>
尝试一下 »
简单的鼠标悬浮过渡效果:
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); }
写 box-shadow 的依次顺序为:
h-shadow v-shadow blur spread color insect 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
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 动画
绘制太阳系各大行星运行轨迹:
尝试一下 »
445CSS3 过渡
简单的鼠标悬浮过渡效果:
尝试一下 »
444CSS3 文本效果
写 box-shadow 的依次顺序为: