提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css3中心知识点的小结(代码示例)【css教程】,css

本篇文章给人人带来的内容是关于css3中心知识点的小结(代码示例),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

css3前缀(浏览器兼容)

依据相识,css3属性大部份支撑ie10,部份支撑ie9,少部份支撑ie8

// 前缀
// -webkit-    Safari and Chrome(苹果、谷歌) 
// -moz-       Firefox(火狐) 
// -ms-        IE9(IE浏览器) 
// -o-         Opera(天下之窗)

// 比方ie兼容:
// -ms-transform(转换)
// -ms-transition(过渡)
// @-ms-keyframes(关键帧)
// -ms-animation(动画 )

transform(转换)

(ie9及以上支撑,ie9需增加前缀-ms-)

// transfrom属性的要领运用
transform: scale(30, 60);               // 缩放:          X轴缩放 30 倍,Y轴缩放 60 倍,只要一个值时为 XY 缩放倍数
transform: skew(30deg, 60deg);          // 倾斜:          X轴倾斜 30 度,Y轴倾斜 60 度,只要一个值时为 X轴 倾斜度数
transform: translate(30px, 60px);       // 挪动:          X轴平移 30 px,Y轴平移 60 px,只要一个值时为 X轴 平移距离
transform: rotate(30deg);               // 扭转:          顺时针扭转 30 度 
transform: rotateX(30deg);              // 3D程度扭转:    3D X轴顺时针翻转 30 度 
transform: rotateY(60deg);              // 3D垂直扭转:    3D Y轴顺时针翻转 60 度
transform: matrix(1, 0, 0, 1, 0, 0);    // 团体转换:      (缩放X, 倾斜X, 倾斜Y, 缩放Y, 挪动X, 挪动Y) 
                                        // 注重:6个参数   悉数为数值,不带单元
                                        // 1、缩放X        X轴缩放倍数
                                        // 2、倾斜X        X轴倾斜百分比(相对宽度)
                                        // 3、倾斜Y        Y轴倾斜百分比(相对高度)
                                        // 4、缩放Y        Y轴缩放倍数
                                        // 5、挪动X        X轴平移像素
                                        // 6、挪动Y        Y轴平移像素

transition(过渡)

(ie10及以上支撑)

transition-property: transform;         // 属性称号
transition-duration: 2s;                // 用时长度(默以为0s) 
transition-timing-function: linear;     // 过渡结果(曲线ease(默许)/匀速linear) 
transition-delay: 1s;                   // 什么时候最先(默以为0s) 
transition: transform 2s linear 1s;     // transform,用时2s,匀速,1s后最先

@keyframes(关键帧)

(ie10及以上支撑)

// -webkit-等前缀在keyframes前面增加
// from ~ to
@keyframes cssName1 {
  from {
    background: red;
  }
  to {
    background: green;
  }
}
// 0% ~ 100%
@keyframes cssName2 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-200px);
  }
  50% {
    transform: translate(0);
  }
  75% {
    transform: translate(200px);
  }
  100% {
    transform: translate(0);
  }
}

animation(动画)

(ie10及以上支撑)

animation-name: name;                                     // 动画称号 
animation-duration: 2s;                                   // 用时长度(默以为0s)
animation-timing-function: linear;                        // 过渡结果(曲线ease(默许)/匀速linear)
animation-delay: 1s;                                      // 什么时候最先(默以为0s)
animation-iteration-count: infinite;                      // 播放次数(1(默许)/infinite永久)
animation-direction: alternate;                           // 顺逆播放(normal正向(默许)/alternate反向) 
animation-play-state: paused;                             // 动画状况(running活动(默许)/paused停息)
animation: name 2s linear 1s infinite alternate paused;   // name,用时2s,匀速,1s后最先,无穷轮回,反向,停息

css3其他属性

css3边框

// ie9及以上支撑
border-radius: 10px;                         // 边框圆角
// ie9及以上支撑
box-shadow: 10px 10px 5px #999;              // 边框暗影(X轴偏移像素、Y轴偏移像素、隐约像素大小、色彩)
// ie11及以上支撑 
border-image: url(bg.jpg) 30 30 round;       // 边框背景(背景、X轴、Y轴、重复性 )

css3背景(ie9及以上支撑)

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

css3文本

// ie10及以上支撑
text-shadow: 3px 2px 1px #f00;               // X轴、Y轴、隐约距离、色彩(笔墨暗影)
// ie8及以上支撑
word-wrap: break-word;                       // 对长单词举行拆分,并换行到下一行(英文换行)

CSS3字体(ie9及以上支撑)

@font-face{
  font-family: myFirstFont;
  font-weight: bold;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot');           // IE9+
}
body{
  font-family: myFirstFont;                  // 定义字体的称号
}

css3多列(ie9及以上支撑)

column-count: 3;                             // 元素中的文本 分开的列数
column-gap: 40px;                            // 元素中的文本 列之间的距离
column-rule: 3px outset #f00;                // 元素中的文本 列之间的宽度、款式和色彩

css3用户界面

// ie8及以上支撑
box-sizing: border-box;                      // 元素宽高是不是包括padding和border
                                             // content-box    不包括(默许)
                                             // border-box     包括
// ie不支撑
resize: both;                                // 调解元素尺寸,需增加 overflow: auto 一同运用
                                             // horizontal     可调宽
                                             // vertical       可调高
                                             // both           可调宽高
                                             // none           不可调
// ie不支撑
outline-offset: 100px;                       // 在元素外100px处10px的表面
                                             // 可合营outline: 10px solid green 一同运用

以上就是css3中心知识点的小结(代码示例)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css3中心知识点的小结(代码示例)【css教程】,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线