CSS3의 새로운 속성과 사용법
- WBOY원래의
- 2016-09-12 17:27:161899검색
요즘 Web2.0 기술의 인기로 인해 이전 CSS2 표준 및 관련 기술은 증가하는 개발 요구를 충족할 수 없는 것 같습니다. 사람들은 더 나은 사용자 경험과 함께 더 아름다운 인터페이스를 구현해야 합니다. CSS3, 이 새로운 세대의 표준이 탄생했습니다. 웹 UI에 대한 기존 개발 요구 사항을 충족하기 위해 많은 새로운 CSS 속성(텍스트, 레이아웃, 색상 등), 다양한 CSS 특수 효과와 같은 일련의 강력한 기능을 제공하고 CSS 애니메이션 및 요소도 지원합니다. 변환. 이 새로운 CSS 기능은 현 단계에서 매우 강력하고 완벽하다고 할 수 있습니다. 간단한 CSS 코드 몇 줄만 추가하면 눈길을 끄는 일련의 효과를 얻을 수 있으며 이는 JavaScript를 사용하여 시뮬레이션한 것보다 훨씬 좋습니다. 이전에는 복잡성이 줄어들고 유지 관리가 쉬워졌을 뿐만 아니라 성능도 비약적으로 향상되어 효과가 훨씬 더 좋아졌습니다. 이번 글에서는 주로 CSS3의 새로운 기능과 활용 팁을 소개하겠습니다.
소개:
CSS는 캐스케이딩 스타일시트입니다. CSS 기술은 웹 개발에서 페이지의 레이아웃, 글꼴, 색상, 배경 및 기타 효과를 효과적으로 제어하는 데 사용됩니다. 몇 가지 간단한 수정만으로 웹페이지의 모양과 형식을 변경할 수 있습니다. CSS3은 CSS의 업그레이드 버전입니다. 이 새로운 표준 세트는 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등과 같은 더욱 풍부하고 실용적인 사양을 제공합니다. , Firefox, Chrome, Safari, Opera 등과 같은 많은 브라우저가 이 업그레이드된 사양을 연속적으로 지원했습니다. 웹 개발에 CSS3 기술을 사용하면 애플리케이션이 크게 아름다워지고, 사용자 경험이 향상되며, 프로그램 성능도 크게 향상됩니다. 이 기사에서는 더욱 아름답고 실용적인 새로운 CSS3 기능에 중점을 둘 것입니다.
1. CSS3 선택기
CSS를 작성해 본 사람이라면 CSS 선택자에 대해 잘 알고 있어야 합니다. 우리가 정의한 CSS 속성을 해당 노드에 적용할 수 있는 이유는 CSS 선택자 모드 때문입니다. 다음 코드를 참고하세요:
목록 1. CSS 선택기 예
Body > .mainTabContainer div > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}
여기서 CSS 선택기는 "body > .mainTabContainer divspan[5]"이며 다음과 같은 경로를 나타냅니다.
1. 클래스 속성 값이 "mainTabContainer"인 "body" 태그의 직계 하위 요소에 있는 모든 요소
2. 레이블이 div인 A의 하위 요소에 있는 모든 요소 B
3. 태그가 B의 직계 하위 요소 중 하나인 다섯 번째 요소 C
이 C 요소(여러 개일 수 있음)는 선택기에 의해 배치된 요소이며 위의 CSS 속성은 모두 C 요소에 적용됩니다.
위는 CSS2 및 이전 버전에서 제공하는 주요 위치 지정 방법입니다. 이제 CSS3는 더욱 편리하고 빠른 선택기를 제공합니다.
목록 2. CSS3 선택기 예
Body > .mainTabContainer tbody:nth-child(even){
Background-color: white;
}
Body > .mainTabContainer tr:nth-child(odd){
Background-color: black;
}
:not(.textinput){
Font-size: 12px;
}
Div:first-child{
Border-color: red;
}
위에 표시된 대로 일상적인 개발에 자주 사용할 수 있는 일부 CSS3 선택기를 나열했습니다. 이러한 새로운 CSS3 기능은 이전에 JavaScript 스크립트를 사용하여 해결해야 했던 많은 문제를 해결합니다.
tbody: nth-child(even), nth-child(odd): 여기서는 테이블(tbody) 아래에 각각 짝수 행과 홀수 행(tr)을 나타냅니다. 이 스타일은 테이블에 매우 적합하며 사람들을 더 즐겁게 만듭니다. 테이블 행 간의 차이점을 명확하게 볼 수 있어 사용자가 쉽게 탐색할 수 있습니다.
: not(.textinput): 이는 클래스가 "textinput"이 아닌 모든 노드를 의미합니다.
div:first-child: 모든 div 노드 아래의 첫 번째 직계 하위 노드를 나타냅니다.
이 외에도 새로 추가된 선택기가 많이 있습니다.
E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s)
여기서는 일일이 소개하지 않겠습니다. 이러한 새로운 기능을 활용하는 방법을 배우면 코드에 대한 두려움이 크게 줄어들고 프로그램 성능이 크게 향상될 수 있습니다.
2. @폰트페이스 기능
Font-face를 사용하면 글꼴 스타일을 로드할 수 있으며, 서버 측 글꼴 파일도 로드할 수 있어 클라이언트에 설치되지 않은 글꼴을 표시할 수 있습니다.
먼저 클라이언트 글꼴의 간단한 사례를 살펴보겠습니다.
목록 3. 폰트-페이스 클라이언트 폰트 케이스
<p><font face="arial">arial courier verdana</font></p>
이러한 글꼴(arial)이 클라이언트에 이미 설치되어 있으므로 이 방법으로 글꼴 스타일을 직접 로드할 수 있습니다. 목록 3 이 작성 방법은 목록 4와 동일합니다.
목록 4. 기본 글꼴 작성 방법
<p><font style="font-family: arial">arial courier verdana</font></p>
이런 글쓰기 방식은 누구나 익숙해져야 한다고 생각합니다.
다음으로 서버측 글꼴, 즉 클라이언트에 설치되지 않은 글꼴 스타일을 사용하는 방법을 살펴보겠습니다.
다음 코드를 참조하세요.
목록 5. 폰트-페이스 서버측 폰트 케이스
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
清单 5 中声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。
这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户端是否已安装时，便可以使用这种方式。
三、Word-wrap & Text-overflow 样式
Word-wrap
先来看看 word-wrap 属性，参考下述代码：
清单 6. word-wrap 案例
<div style="width:300px; border:1px solid #999999; overflow: hidden"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div> <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div>
比较上述两段代码，加入了“word-wrap: break-word”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。所以可见如下的差别：
Text-overflow
知道了 word-wrap 的原理，我们再来看看 text-overflow，其实它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示，见如下示例：
清单 7. Text-overflow 案例
.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
width:200px; background:#ccc;}
<div class="clip">
不显示省略标记，而是简单的裁切条
</div>
<div class="ellipsis">
当对象内文本溢出时显示省略标记
</div>
如清单 7 所示，这里我们均使用“overflow: hidden”，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。见图 3 的效果图。
图 3. Text-overflow 效果图
这里我们可以看到，ellipsis 的显示方式比较人性化，clip 方式比较传统，我们可以依据需求进行选择。
四、文字渲染（Text-decoration）
CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：
清单 8. Text-decoration 案例
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}
这里我们主要以 webkit 内核浏览器为例，清单 8 的代码效果如图 4：
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
五、CSS3 的多列布局（multi-column layout）
CSS3 现在已经可以做简单的布局处理了，这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量，参考如下代码：
清单 9. CSS3 多列布局
.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
<div class="multi_column_style">
.................
.................
</div>
这里我们还是以 webkit 内核浏览器为例：
Column-count：表示布局几列。
Column-rule：表示列与列之间的间隔条的样式
Column-gap：表示列于列之间的间隔
六、边框和颜色（color, border）
关于颜色，CSS3 已经提供透明度的支持了：
清单 10. 颜色的透明度
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
这里的“rgba”属性中的“a”代表透明度，也就是这里的“0.75”，同时 CSS3 还支持 HSL 颜色声明方式及其透明度：
清单 11. HSL 的透明度
color: hsla( 112, 72%, 33%, 0.68);
对于 border，CSS3 提供了圆角的支持：
清单 12. 圆角案例
border-radius: 15px;
七、CSS3 的渐变效果（Gradient）
线性渐变
左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
清单 13. 左到右的渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。
同理，也可以有从上到下，任何颜色间的渐变转换：
还有复杂一点的渐变，如：水平渐变，33% 处为绿色，66% 处为橙色：
清单 14. 复杂线性渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
这里的“color-stop”为拐点，可见效果图：
径向渐变
接下来我们要介绍径向渐变（radial），这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子：
清单 15. 径向渐变（目标圆半径为 0）
backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
前面“50,50,50”是起始圆的圆心坐标和半径，“50,50,0”蓝色是目标圆的圆心坐标和半径，“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下，和放射由内至外不一样，径向渐变刚好相反，是由外到内的渐变。清单 15 标识的是两个同心圆，外圆半径为 50px，内圆半径为 0，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：
清单 16. 径向渐变（目标圆半径非 0）
backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
这里我们给目标圆半径为 10会有一个半径为 10 的纯蓝的圆在最中间，这就是设置目标圆半径的效果。
现在我再改变一下，不再是同心圆了，内圆圆心向右 20px 偏移。
清单 17. 径向渐变（目标圆圆心偏移）
backgroud: -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
这里我们给目标圆半径还是 10，但是圆心偏移为“70，50”（起始圆圆心为“50，50”）
想必您明白原理了，我们可以做一个来自顶部的漫射光，类似于开了盏灯：
清单 18. 径向渐变（漫射光）
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
八、CSS3 的阴影（Shadow）和反射（Reflect）效果
首先来说说阴影效果，阴影效果既可用于普通元素，也可用于文字，参考如下代码：
清单 19. 元素和文字的阴影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
设置很简单，对于文字阴影：表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px, 而阴影模糊半径 6px，颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值，负值则反方向。元素阴影也类似。
清单 20. 反射
.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
设置也很简单，大家主要关注“-webkit-box-reflect: below 10px”，他表示反射在元素下方 10px 的地方，再配上渐变效果。
九、CSS3 的背景效果
CSS3 多出了几种关于背景（background）的属性，我们这里会简单介绍一下：
首先：“Background Clip”，该属确定背景画区，有以下几种可能的属性：
* background-clip: border-box; 背景从 border 开始显示 ;
* background-clip: padding-box; 背景从 padding 开始显示 ;
* background-clip: content-box; 背景显 content 区域开始显示 ;
* background-clip: no-clip; 默认属性，等同于 border-box;
通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。
其次：“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。
* background-origin: border-box; 从 border. 开始计算 background-position;
* background-origin: padding-box; 从 padding. 开始计算 background-position;
* background-origin: content-box; 从 content. 开始计算 background-position;
还有，“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性：
* background-size: contain; 缩小图片以适合元素（维持像素长宽比）
* background-size: cover; 扩展元素以填补元素（维持像素长宽比）
* background-size: 100px 100px; 缩小图片至指定的大小 .
* background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 .
最后，“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
* background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
* background-break: bounding-box; 把盒之间的距离计算在内；
* background-break: each-box; 为每个盒子单独重绘背景。
这种属性让您可以设定复杂元素的背景属性。
最为重要的一点，CSS3 中支持多背景图片，参考如下代码：
清单 21. 多背景图片
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}
此为同一元素两个背景的案例，其中一个重复显示，一个不重复。参考一下效果图：
十、CSS3 的盒子模型
盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。
下面我们来介绍一下他是如何工作的，参考如下代码：
清单 22. CSS3 盒子模型
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
默认情况下，如果“boxcontainer”和“item”两个 class 里面没有特殊属性的话，由于 div 是块状元素，所以他的排列应该是这样的：
清单 23. CSS3 盒子模型（水平排列）
.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
注意这里的“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。细心的读者会看到，“盒子”的右侧多出来了很大一块，这是怎么回事呢？让我们再来看一个比较有特点的属性：“flex”
清单 24. CSS3 盒子模型（flex）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
您看到什么区别了没？在第四个“item 元素”那里多了一个“flex”属性，第四个“item 元素”填满了整个区域，这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值，并加入更多的元素，见如下代码：
清单 25. CSS3 盒子模型（flex 进阶）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item flex2">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.flex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
}
我们把倒数第二个元素（元素 3）也加上“box-flex”属性，并将其值设为 2元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域，这就是“box-flex”属性的进阶应用。
还有，“box-direction”可以用来翻转这四个盒子的排序，“box-ordinal-group”可以用来改变每个盒子的位置：一个盒子的 box-ordinal-group 属性值越高，就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。
十一、CSS3 的 Transitions, Transforms 和 Animation
Transitions
先说说 Transition，Transition 有下面些具体属性：
transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
可能您觉得摸不着头脑，其实很简单，我们用一个例子说明，参看一下如下代码：
清单 26. CSS3 的 Transition
<div id="transDiv" class="transStart"> transition </div>
.transStart {
background-color: white;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.transEnd {
background-color: red;
}
这里他说明的是，这里 id 为“transDiv”的 div，当它的初始“background-color”属性变化时（被 JavaScript 修改），会呈现出一种变化效果，持续时间为 0.3 秒，效果为均匀变换（linear）。如：该 div 的 class 属性由“transStart”改为“transEnd”，其背景会由白（white）渐变到红（red）。
Transform
再来看看 Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。见如下代码：
清单 27. CSS3 的 Transform
.skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
“skew”是倾斜，“scale”是缩放，“rotate”是旋转，“translate”是平移。最后需要说明一点，transform 支持综合变换。可见其效果图如下：
图 20. CSS3 的 Transform 效果图
现在您应该明白 Transform 的作用了吧。结合我们之前谈到的 Transition，将它们两者结合起来，会产生类似旋转，缩放等等的效果，绝对能令人耳目一新。
Animation
最后，我们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例，见如下代码：
清单 28. CSS3 的 Animation
@-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
먼저 애니메이션의 내용을 정의합니다. 목록 28과 같이 애니메이션 "anim1"을 정의합니다. 변경 방법은 "투명도"(불투명도: 1)입니다. 동시에 내부 글꼴 크기가 "12px"에서 "24px"로 변경되었습니다. 그런 다음 애니메이션의 변경 매개변수를 정의합니다. 그 중 "duration"은 애니메이션의 지속 시간을 나타내고, "iteration-count"는 애니메이션 반복 횟수를 나타내며, 방향은 애니메이션이 한 번 실행된 후 방향이 변경되는 방식을 나타냅니다( 예를 들어 처음에는 오른쪽에서 왼쪽으로, 두 번째는 왼쪽에서 오른쪽으로) 마지막으로 "타이밍 기능"은 변경 모드를 나타냅니다.
실제로 CSS3 애니메이션은 거의 모든 스타일 변경을 지원하며 사용자 경험의 요구 사항을 충족하기 위해 다양한 애니메이션 효과를 정의할 수 있습니다.
여기서 CSS3의 새로운 주요 기능을 소개합니다. 이러한 기능은 기본적으로 Chrome과 Safari에서 지원되며, Firefox는 일부 기능을 지원하고 IE와 Opera는 그 이하를 지원합니다. 독자들은 집단적 상황에 따라 선택하여 사용할 수 있습니다.