> 웹 프론트엔드 > CSS 튜토리얼 > CSS3 핵심 지식 요약(코드 예시)

CSS3 핵심 지식 요약(코드 예시)

不言
풀어 주다: 2019-01-25 11:34:54
앞으로
3781명이 탐색했습니다.

이 글은 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(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 border

// 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 text

// 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 핵심 지식 요약(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿