CSS3的几个基本知识点简介

CSS3 边框

在 CSS3 中,border-radius 属性用于创建圆角:box-shadow 用于向方框添加阴影:

通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 ,并且不需使用设计软件,

向 div 元素添加圆角:

div
{
border:3px solid black;
border-radius:16px;
}

向 div 元素添加方框阴影:

div
{
box-shadow: 5px 5px 3px grey;
}

调整背景图片的大小:
div { background:url(bg_flower.gif); background-size:30px 50px; background-repeat:no-repeat; }
通过 CSS3 的 border-image 属性,可以使用图片来创建边框:
div
{
border-image:url(border.png) 10 20 round;
}
background-size 属性规定背景图片的尺寸。

CSS3 文本阴影

   在 CSS3 中,text-shadow 可向文本应用阴影。

   向标题添加阴影:

h1
{
text-shadow: 10px 8px 8px #FFFFFF;
}

  CSS3 自动换行

  在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:

  2D 转换

  translate() 方法

  通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

  div
 {
 transform: translate(100px,50px);
 }
 rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

div
{
transform: rotate(20deg);
}

scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

div
{
transform: scale(2,2);
}

skew() 方法

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

div
{
transform: skew(35deg,45deg);
}

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

过渡属性

下面的表格列出了所有的转换属性:

属性描述CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

下面的两个例子设置所有过渡属性:

在一个例子中使用所有过渡属性:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性描述CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

下面的两个例子设置了所有动画属性:

运行名为 myfirst 的动画,其中设置了所有动画属性:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}


 


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。