前端_CSS3新特性

来源：互联网发布：淘宝上自然堂旗舰店编辑：程序博客网时间：2024/06/13 06:30

（1）布局——一行两列：使用width宽度+float浮动即可实现一行显示两列DIV布局。

第一种情况，float浮动相同
让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。

.div-a{ float:left;width:49%;border:1px solid #F00}

.div-b{ float:left;width:49%;border:1px solid #000}

第二种情况，float浮动值不同
一个设置为float:left;一个设置为float:right.。

.div-c{ float:left;width:49%;border:1px solid #F00}

.div-d{ float:right;width:49%;border:1px solid #000}

（2）CSS定位：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。CSS3新特性：框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面

边框

您能够创建圆角边框border-radius 例：border-radius:25px;

向矩形添加阴影box-shadow 例：box-shadow: 10px 20px 20px #888888;

（偏右，偏下，散度，颜色）

使用图片来绘制边框 border-image 例：

border-image:url(/i/border.png) 30 10 round;

背景

background-size：属性规定背景图片的尺寸例：

background-size:63px 100px; background-size:45% 10%;（）

background-origin：background-origin属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box或border-box区域。例：background-origin:content-box

多重复背景：body

{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

文本特性

可向文本应用阴影 text-shadow，例：

h1{text-shadow: 5px 5px 5px #FF0000;}

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

p.test{width:11em; border:1px solid #000000;word-wrap:break-word;}

字体

CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在CSS3 @font-face规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过font-family属性来引用字体的名称(myFirstFont)：

实例

<style>

@font-face

{font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */}

div

{font-family:myFirstFont;}

</style>

CSS3 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。（转换是使元素改变形状、尺寸和位置的一种效果。您可以使用2D或3D转换来转换您的元素。）

2D 转换

在本章中，您将学到如下 2D 转换方法：

translate()//元素从其当前位置移动，根据给定的 left（x坐标）和top（y坐标）位置参数：

rotate()//元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转 rotate(30deg);

scale()//元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数,例scale(2,4)把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。

skew()//元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数：skew(30deg,20deg)围绕X轴把元素翻转30度，围绕Y轴翻转20度。

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

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

对于以上几个方法，一般不同的内核，前缀不同，例

div

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */

}

3D转换

rotateX() 方法，元素围绕其 X轴以给定的度数进行旋转。

rotateY() 方法，元素围绕其 Y轴以给定的度数进行旋转。

例：div

{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

CSS3 过渡

通过 CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

<style>

div{width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */}

div:hover

{width:300px;}

</style>

</head>

<body>

<p>请把鼠标指针放到黄色的 div元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在Internet Explorer中无效。</p>

如果时长未规定，则不会有过渡效果，因为默认值是 0。

CSS3 动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习@keyframes规则。

@keyframes 规则用于创建动画。在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

@keyframes myfirst

{from {background: red;}to {background: yellow;}}

@keyframes myfirst

{0% {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}}

CSS3 多列布局

column-count//属性规定元素应该被分隔的列数

column-gap // 属性规定列之间的间隔：

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

CSS3用户界面

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

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

outline-offset //属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：轮廓不占用空间,轮廓可能是非矩形

阅读全文

0 0