码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2016-05-16 11:02:28      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

①W3School的学习

一、CSS3动画属性(Animation

@keyframes 规定动画

animation 所有动画属性的简写属性,处理animation-play-state属性。

animation-name 规定@keyframes动画的名称。

animation-duration 规定动画完成一个周期所花费的秒或毫秒

animation-timing-function 规定动画的速度曲线

animation-delay 规定动画何时开始

animation-iteration-count 规定动画被播放的次数

animation-direction 规定动画是否在下一周期逆向地播放

animation-play-state 规定动画是否正在运行或暂停

animation-fill-mode 规定对象动画时间之外的状态

 

二、CSS3边框属性

 

Border-radius  设置所有四个 border-*-radius属性的简写属性

 

Border-image 设置所有border-image-*属性的简写属性。

 

Box-shadow 向方框添加一个或多个阴影。

 

Div(圆角矩形)

 

{

 

border:2px solid

 

Border-radius:25px

 

-moz-border-radius:25px;

 

}

 

 

 

Div(向方框添加阴影)

 

{

 

Box-shadow:10px 10px 5px #8888888

 

}

Div(向方框添加阴影)

{

Box-shadow10px 10px 5px #8888888

}

 

 

Div(添加边框图片)

{

border-imageurlborder.png30 30 round;

}

三、CSS3 背景属性

Background-clip 规定背景的绘制区域

Background-origin 规定背景图片的定位区域

Background-size 规定背景图片的尺寸

div(设置背景图片的大小)

{

backgroundurlbg_flower.gif);

background-size:63px 100px;

background-repeat: no-repeat;

}

 

div(对背景图片进行拉伸,使其完成填充内容区域)

{

background: url(bg_flower.gif);

background-size: 40% 100%;

background-repeat: no-repeat;

}

Css3 background-origin:contet-box属性规定背景图片的定位区域

技术分享

 

div

 

{

 

backgroundurlbg_flower.gif);

 

Background-repeat: no-repeat;

 

Background-size:100% 100%;

 

Background-origin: content-box;

 

}

 

Body

 

{

 

Background-image: url(bg_flower.gif), url(bg_flower_2.gif);

 

}

五、CSS3文本效果

hanging-punctuation 规定标点字符是否位于线框之外

punctuation-trim 规定是否对标点字符进行修剪

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行

text-emphasis 湘元素的文本应用重点标记以及重点标记的前景色

text-justify 规定当text-align设置为“justify”时所使用对齐方法

text-outline 规定文本的轮廓

text-overflow 规定当文本溢出包含元素时发生的事情

word-break 规定非中日韩文本的换行规则

text-shadow 向文本应用阴影

水平阴影、垂直阴影、模糊距离、阴影的颜色

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

word-wrap 自动换行

P{

word-wrapbreak-word;

}

六、CSS3字体属性

font-stretch

font-stretch

font-style

font-weight

unicode-range

<style>

@font-face

{

font-family:myFirstFont;

src: url(‘Sansation_Light.ttf),url(‘Sansation_Light.eot‘);

}

div

{

font-family:myFirstFont;

}

</style>

七、CSS32D 转换(对元素进行移动、缩放、转动、拉长或拉伸)

tranlagte();

元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。

rotate();

元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转

scale();

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

skew();

围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度

matrix();

方法把所有 2D 转换方法组合在一起。方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

div

{

transformrotate30deg);

}

 

div

{

transform: translate(50px,100px);

}

div

{

transform: skew(30deg,20deg);

}

div

{

transformmatrix0.866,0.5-0.5,0.866,0,0);

}

八、CSS33D 转换

transform-origin 允许改变被转换元素的位置

transform-style 规定被嵌套元素如何在3D空间中显示

perspective 规定3D元素的透视效果

perspective-origin 规定3D元素的底部位置

backface-visibility 定义元素在不面对屏幕时是否可见

rotateX()方法

元素围绕其X轴以给定的读数进行旋转

rotateY()方法

元素围绕Y轴已给定的角度进行旋转

div

{

transform rotatex120deg);

}

div

{

transform: rotateY(130deg);

}

 

九、CSS3过渡(当元素从一种样式变换为另一种样式时为元素添加效果)

transition 简写属性,用于在一个属性中设置四个过滤属性。

transition-property 规定应用过滤的CSS属性的名称。

transition-duration 定义过滤效果花费的时间。默认是0

transition-timing-function 规定过滤效果的时间曲线。默认是ease

transition-delay 规定过滤效果何时开始。默认是0

宽度属性的过滤效果

div

{

transition: width 2s;

}

div;hover

{

width:300px;

}

多项改变

如需向多个样式添加过滤效果,枪添加多个属性,有逗号隔开

 

向宽度、高度和转换添加过滤效果:

div

{

transition width2 height 2s transform 2s

}

 

 

div

{

transition-property width

transition-duration 1s

transition-timing-function linear

transition-delay 2s

}

简写属性

div

{

transition width 1s inear 2s

}

 

十、多列

column-count

column-gap

column-rule

 

column-fill 规定如何填充

column-rule-color 规定列之间规则的颜色

column-rule-style 规定列之间规则的样式

column-rule-width 规定列之间规则的宽度

column-span 规定元素应该横跨的列数

columns 规定设置column-widthcolumn-count的简写属性。

 

div元素中的文本分割为三列

div

{

column-count:3;

}

 

规定列之间40像素的间隔

div

{

column-gap40px

}

column-rule属性设置列之间的宽度、样式和颜色规则

div

{

column-rule3px outset #ff0000

}

 

 

十一、用户界面

 

新的用户界面特性包括重设元素尺寸、和尺寸以及轮廓等。

resize

box-sizing

outline-offset标准用户界面元素的外观

icon 为创作者提供使用图标等价物来设置元素样式的能力

nav-down 规定使用arrow-down导航键时向何处导航

nav-index 设置元素的tab键控制次序

nav-left 规定在使用arrow-left导航键时向何处导航

nav-right

nav-up

outline-offset 对轮廓进行偏移,并在超出边框边缘的部分绘制轮廓

 

 

appearance 将元素设置为

 

resize属性规定是否可由用户调整元素尺寸

div

{

resizeboth

overflowauto

}

 

box-sizing属性允许您一确切的方式定义时应的某个区域的具体内容

规定两个并排的带边框方框

div

{

box-sizingborder-box

width50%

floatleft

}

 

outline offset 属性对轮廓警醒偏移,并在超出边框边缘的位置绘制轮廓。

轮廓不占空间 轮廓可能是非矩形

div

{

border2px solid black

outline2px solid red

outline-offset15px

 

}

 

 

CSS

标签:

原文地址:http://www.cnblogs.com/jinb/p/5497196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!