CSS3

(1圆角边框

border-radius

border-top-left-radius(左上角的形状)

border-top-right-radius(右上角的形状)

border-bottom-left-radius(左下角的形状)

border-bottom-right-radius(右下角的形状)

border-radius:水平值，垂直值

若border-radius只有一个值，则代表一个圆形。

因为改图形高度为50px,刚好等于25px的2倍，所以两边呈现两个圆弧。

border-radius未说明是哪个方向的形状，则为4个方向的形状均为这个。

圆形的创建

box-shadow阴影

box-shadow:水平偏移，垂直偏移，模糊程度(模糊距离的范围，值越大模糊程度越大），阴影颜色

下图为水平偏移和垂直偏移均为正数的情况下，若为负数，则向左上方偏移。

(2)文本与文字

text-shadow属性：水平偏移，垂直偏移，阴影大小，颜色

若水平偏移和垂直偏移均为0，则效果如图

word-rap属性

允许长单词，URL强制进行换行

break-word属性

把word-wrap属性设为 break-word;

则会进行强制换行，否则该内容将会超出文本框，溢出

@font-face规则

要将自己文件下载下来并放到电脑中，以便引用，并且需要4种文件格式

2D变换

transform属性：旋转rotate()   伸缩scale()

 

旋转例子

transform:scale(x,y)   x代表水平缩放，y代表垂直缩放，若值大于1，代表放大，小于1，代表缩小，若只有一个值，则代表各个方向都伸缩。

过渡与动画

transition属性

transition-property:对哪个属性名进行变化

transition-duration:持续时间

transition-timing-function:过渡时使用的函数(即过渡的速度，linear(匀速）ease(慢快慢) ease-in(慢快) ease-out(快慢) ease-in-out(慢快慢）

transition:(property) (duration) (function)

鼠标悬停在这个单词，过了一秒变成下面这个样子。

鼠标悬停在上面这几个进度条时，它们会以各自的速度变长。

animation动画

定义动画@keyframes规则

调用动画 animation属性

animation-name :引用@keyframes动画的名称

animation-duration：动画完成时间

animation-timing-function规定动画的速度曲线，默认是"ease"

animation-play-state running|paused;

animation:动画名称，动画完成时间 规定动画的速度

如果想要动画不停止地播放，加入infinite即可。它属于animation-iteration-count

当打开这个文件时，各个进度条以各自的速度前进。

3D变换

3D: transform-style:preserve-3d

旋转 transform属性 rotateX() rotateY() rotateZ()

透视：perspective属性

当鼠标悬停时，图片将进行翻转

咖啡屋