当前位置:Gxlcms > css > css3核心知识点的小结(代码示例)

css3核心知识点的小结(代码示例)

时间:2021-07-01 10:21:17 帮助过:43人阅读

本篇文章给大家带来的内容是关于css3核心知识点的小结(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css3前缀(浏览器兼容)

根据了解,css3属性大部分支持ie10,部分支持ie9,少部分支持ie8

  1. // 前缀
  2. // -webkit- Safari and Chrome(苹果、谷歌)
  3. // -moz- Firefox(火狐)
  4. // -ms- IE9(IE浏览器)
  5. // -o- Opera(世界之窗)
  6. // 例如ie兼容:
  7. // -ms-transform(转换)
  8. // -ms-transition(过渡)
  9. // @-ms-keyframes(关键帧)
  10. // -ms-animation(动画 )

transform(转换)

(ie9及以上支持,ie9需添加前缀-ms-)

  1. // transfrom属性的方法使用
  2. transform: scale(30, 60); // 缩放: X轴缩放 30 倍,Y轴缩放 60 倍,只有一个值时为 XY 缩放倍数
  3. transform: skew(30deg, 60deg); // 倾斜: X轴倾斜 30 度,Y轴倾斜 60 度,只有一个值时为 X轴 倾斜度数
  4. transform: translate(30px, 60px); // 移动: X轴平移 30 px,Y轴平移 60 px,只有一个值时为 X轴 平移距离
  5. transform: rotate(30deg); // 旋转: 顺时针旋转 30 度
  6. transform: rotateX(30deg); // 3D水平旋转: 3D X轴顺时针翻转 30 度
  7. transform: rotateY(60deg); // 3D垂直旋转: 3D Y轴顺时针翻转 60 度
  8. transform: matrix(1, 0, 0, 1, 0, 0); // 整体转换: (缩放X, 倾斜X, 倾斜Y, 缩放Y, 移动X, 移动Y)
  9. // 注意:6个参数 全部为数值,不带单位
  10. // 1、缩放X X轴缩放倍数
  11. // 2、倾斜X X轴倾斜百分比(相对宽度)
  12. // 3、倾斜Y Y轴倾斜百分比(相对高度)
  13. // 4、缩放Y Y轴缩放倍数
  14. // 5、移动X X轴平移像素
  15. // 6、移动Y Y轴平移像素

transition(过渡)

(ie10及以上支持)

  1. transition-property: transform; // 属性名称
  2. transition-duration: 2s; // 用时长度(默认为0s)
  3. transition-timing-function: linear; // 过渡效果(曲线ease(默认)/匀速linear)
  4. transition-delay: 1s; // 何时开始(默认为0s)
  5. transition: transform 2s linear 1s; // transform,用时2s,匀速,1s后开始

@keyframes(关键帧)

(ie10及以上支持)

  1. // -webkit-等前缀在keyframes前面添加
  2. // from ~ to
  3. @keyframes cssName1 {
  4. from {
  5. background: red;
  6. }
  7. to {
  8. background: green;
  9. }
  10. }
  11. // 0% ~ 100%
  12. @keyframes cssName2 {
  13. 0% {
  14. transform: translate(0);
  15. }
  16. 25% {
  17. transform: translate(-200px);
  18. }
  19. 50% {
  20. transform: translate(0);
  21. }
  22. 75% {
  23. transform: translate(200px);
  24. }
  25. 100% {
  26. transform: translate(0);
  27. }
  28. }

animation(动画)

(ie10及以上支持)

  1. animation-name: name; // 动画名称
  2. animation-duration: 2s; // 用时长度(默认为0s)
  3. animation-timing-function: linear; // 过渡效果(曲线ease(默认)/匀速linear)
  4. animation-delay: 1s; // 何时开始(默认为0s)
  5. animation-iteration-count: infinite; // 播放次数(1(默认)/infinite永远)
  6. animation-direction: alternate; // 顺逆播放(normal正向(默认)/alternate反向)
  7. animation-play-state: paused; // 动画状态(running运动(默认)/paused暂停)
  8. animation: name 2s linear 1s infinite alternate paused; // name,用时2s,匀速,1s后开始,无限循环,反向,暂停

css3其他属性

css3边框

  1. // ie9及以上支持
  2. border-radius: 10px; // 边框圆角
  3. // ie9及以上支持
  4. box-shadow: 10px 10px 5px #999; // 边框阴影(X轴偏移像素、Y轴偏移像素、模糊像素大小、颜色)
  5. // ie11及以上支持
  6. border-image: url(bg.jpg) 30 30 round; // 边框背景(背景、X轴、Y轴、重复性 )

css3背景(ie9及以上支持)

  1. background-size: 40% 100%; // 背景图大小(像素或百分比缩放)
  2. background-origin: content-box; // 背景图定位区域(content-box、padding-box(默认)、border-box)
  3. background-clip: content-box; // 背景绘制区域(content-box、padding-box(默认)、border-box)

css3文本

  1. // ie10及以上支持
  2. text-shadow: 3px 2px 1px #f00; // X轴、Y轴、模糊距离、颜色(文字阴影)
  3. // ie8及以上支持
  4. word-wrap: break-word; // 对长单词进行拆分,并换行到下一行(英文换行)

CSS3字体(ie9及以上支持)

  1. @font-face{
  2. font-family: myFirstFont;
  3. font-weight: bold;
  4. src: url('Sansation_Light.ttf'),
  5. url('Sansation_Light.eot'); // IE9+
  6. }
  7. body{
  8. font-family: myFirstFont; // 定义字体的名称
  9. }

css3多列(ie9及以上支持)

  1. column-count: 3; // 元素中的文本 分隔的列数
  2. column-gap: 40px; // 元素中的文本 列之间的间隔
  3. column-rule: 3px outset #f00; // 元素中的文本 列之间的宽度、样式和颜色

css3用户界面

  1. // ie8及以上支持
  2. box-sizing: border-box; // 元素宽高是否包含padding和border
  3. // content-box 不包含(默认)
  4. // border-box 包含
  5. // ie不支持
  6. resize: both; // 调整元素尺寸,需添加 overflow: auto 一起使用
  7. // horizontal 可调宽
  8. // vertical 可调高
  9. // both 可调宽高
  10. // none 不可调
  11. // ie不支持
  12. outline-offset: 100px; // 在元素外100px处10px的轮廓
  13. // 可配合outline: 10px solid green 一起使用

以上就是css3核心知识点的小结(代码示例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行