[分享]CSS3教程简笔画q版

CSS3教程简笔画q版CSS3（层叠样式表3）是CSS语言的最新升级版本，与CSS2相比，CSS3提供了更多的样式和效果，使网页更加漂亮和动态。下面是一份CSS3教程简笔画q版，帮助你快速掌握CSS3...

CSS3教程简笔画q版

CSS3（层叠样式表3）是CSS语言的最新升级版本，与CSS2相比，CSS3提供了更多的样式和效果，使网页更加漂亮和动态。下面是一份CSS3教程简笔画q版，帮助你快速掌握CSS3的基础知识和常用效果。

/* CSS3教程简笔画q版 */

/* 1. 选择器 */
/* 基础选择器 */
div {}
#id {}
.class {}
/* 属性选择器 */
input[type="text"] {}
/* 伪类选择器 */
a:hover {}
li:nth-child(odd) {}

/* 2. 盒子模型 */
/* 标准盒子模型 */
box-sizing: content-box;
/* IE盒子模型 */
box-sizing: border-box;
/* 圆角 */
border-radius: 5px;
/* 阴影 */
box-shadow: 3px 3px 5px rgba(0,0,0,.3);

/* 3. 背景 */
/* 颜色 */
background-color: #ffffff;
/* 图片 */
background-image: url("bg.jpg");
/* 重复 */
background-repeat: repeat;
/* 定位 */
background-position: center center;
/* 大小 */
background-size: cover;

/* 4. 文字 */
/* 颜色 */
color: #333333;
/* 字体 */
font-family: "Microsoft YaHei";
/* 大小 */
font-size: 14px;
/* 粗细 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 文字阴影 */
text-shadow: 1px 1px 2px rgba(0,0,0,.3);

/* 5. 边框 */
/* 样式 */
border-style: solid;
/* 宽度 */
border-width: 1px;
/* 颜色 */
border-color: #666666;

/* 6. 相对定位 */
position: relative;
/* 位置 */
top: 10px;
left: 10px;

/* 7. 绝对定位 */
position: absolute;
/* 位置 */
top: 50%;
left: 50%;
/* 偏移 */
transform: translate(-50%, -50%);

/* 8. 过渡 */
transition: all .3s ease;

/* 9. 动画 */
animation: name 1s ease-in-out infinite;
@keyframes name {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}