CSS3在CSS2.1的基础上新增加了许多属性，这里选择了较常用的一些功能与大家分享，帮助文档中有很详细的描述，可以在本文的示例中获得帮助文档。

一、阴影

1.1、文字阴影

text-shadow
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text{
                font: bold 100px/1.5 georgia, sans-serif;
                color: dodgerblue;
                text-shadow: 10px 10px 50px #000;
                /*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
            }
        </style>
    </head>
    <body>
        <div class="text">
            Shadow Text
        </div>
    </body>
</html>

运行效果：

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            body {
                background: #000;
                color: #fff;
            }
            .neon{
                font: bold 100px/1.5 georgia, sans-serif;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
            }
        </style>
        <div class="neon">
            Hello NEON Text
        </div>
    </body>
</html>

运行结果：

1.2、盒子阴影

box-shadow
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow1{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
            }
            .shadow2{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 0 0 30px 0 #1E90FF;
            }
        </style>
    </head>
    <body>
        <p>
        <img src="img/7.jpg" class="shadow2"/>
        </p>
    </body>
</html>

运行效果：

练习：

二、背景

2.1、背景图像尺寸

background-size：指定对象的背景图像的尺寸大小

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 500px;
                height: 300px;
                border: 10px solid rgba(0,0,255,.3);
                margin: 100px;
 
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                /*background-size:100px 50px;*/
                /*background-size:contain;*/
            }
        </style>
    </head>
    <body>
        <div id="div1">
 
        </div>
    </body>
</html>

运行结果：

2.2、背景图像显示的原点

background-origin：指定对象的背景图像显示的原点。

background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 400px;
                height: 200px;
                border: 20px solid rgba(0,0,255,.2);
                margin: 100px;
                padding: 20px;
 
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                background-origin:padding-box;
            }
        </style>
    </head>
    <body>
        <div id="div1">
 
        </div>
    </body>
</html>

border-box效果：

content-box效果：

padding-box效果：（默认）

三、伪元素

伪元素不是真的元素是通过CSS虚拟出的一个元素，CSS3的语法为了区分伪元素与伪类，使用“：：”表示，但是前期为了兼容“：”仍然可以使用。

3.1、before

在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式。

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                margin: 100px;
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }
 
            #div1:before {
                content: '这是before伪元素的内容';
                display: block;
                color: white;
                background: lightgreen;
            }
 
            #link1:before {
                content: attr(href);
            }
 
            #link2:before {
                content: url(img/link.png);
            }
        </style>
    </head>
 
    <body>
        <div id="div1">
            <hr />
        </div>
 
        <p>
            <a href="http://best.cnblogs.com" id="link1">博客园</a>
        </p>
 
        <p>
            <a href="http://best.cnblogs.com" id="link2">张果 - 博客园</a>
        </p>
    </body>
 
</html>

效果：

在上面的示例中伪元素可以当成一个正常的元素写所有样式，attr可以取出元素的属性，img可以指定图片。

3.2、after

after也是一个与before类似的伪元素，不同的是他的位置是在内部的尾部，示例如下：

运行效果：

注意：

a)、本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::after。
b)、不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。
c)、IE10在使用伪元素动画有一个问题：
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活

3.3、清除浮动

方法一：

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

方法二：

            .clearfix {
                *zoom: 1;
                /*在旧版本的IE浏览器缩放大小，触发haslayout（类似BFC）*/
            }
 
            .clearfix:after {
                /*伪元素，在应用该元素后添加一个伪元素*/
                content: "";
                /*内容为空*/
                display: table;
                /*BFC，清除内部浮动*/
                clear: both;
                /*清除外部浮动*/
            }

四、圆角与边框

圆角可能是我们最迫切需要的CSS3样式了，在CSS2.1中想尽各种办法都不算理想，实现方法如下：

4.1、border-radius 圆角

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

这里有两部分，第一个角度是水平角度，第二个角度是垂直角度。

a)、提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
b)、水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
c)、如果只提供一个参数，将用于全部的于四个角。
d)、如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
e)、如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。对应的脚本特性为borderRadius。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                margin: 100px;
                padding: 10px;
                border: 5px solid lightgreen;
 
                /*border-radius: 20px;  4个角水平与垂直都为10px*/
 
                 /*border-radius: 30px 0 30px 0;  上右下左4个角*/
 
                /*border-radius: 190px; 4个角圆角是高宽一半*/
 
                border-radius: 165px 105px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        border-radius: 165px 105px;
        </div>
    </body>
</html>

效果：

4.2、边框图片border-image

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>：设置或检索对象的边框背景图的分割方式。
<' border-image-width '>：设置或检索对象的边框厚度。
<' border-image-outset '>：设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>：设置或检索对象的边框图像的平铺方式。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 167px;
                margin: 100px;
                padding: 10px;
                border: 27px solid lightgreen;
 
                border-image: url(img/border.png);
                border-image-slice: 27;
            }
        </style>
    </head>
    <body>
        <div id="div1">
                border-image: url(img/border.png);<br/>
                border-image-slice: 27;<br />
        </div>
 
    </body>
</html>

效果：

五、变形 transform

CSS3中使用transform对元素进行变形，可以是2D的也可以是3D（效果）的，transform的参数有许多，多数是函数的形式，具体如下：

transform：none | <transform-function>+

2D Transform Functions：
matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：指定对象X轴（水平方向）的平移
translatey()：指定对象Y轴（垂直方向）的平移
rotate()：指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：指定对象X轴的（水平方向）扭曲
skewy()：指定对象Y轴的（垂直方向）扭曲 3D Transform Functions：
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：指定对象Z轴的平移
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：指定对象在x轴上的旋转角度
rotatey()：指定对象在y轴上的旋转角度
rotatez()：指定对象在z轴上的旋转角度
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：指定对象的z轴缩放
perspective()：指定透视距离

5.1、rotate()2D旋转

transform:rotate(<angle>)

angle是角度的意思，单位可以是：

deg 度（Degrees）
grad 梯度（Gradians）
rad 弧度（Radians）
turn 转、圈（Turns）

示例：

效果：

5.2、设置原点 transform-origin

transform-origin用于设置变形时的原点，从5.1可以看出转动时默认的原点在中心，这里使用该属性修改原点位置。

transform-origin：水平（left | center | right）垂直（top | center | bottom）

示例：

效果：

一般情况下我们会在9个关键点转动，也可以使用具体的数字指定一个特殊的位置。

5.3、平移 translate()

transform：translate(x,y) = translate(<translation-value>[,<translation-value>]?)，指定对象的 2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 。

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }
 
            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: translate(50%,-50px);
            }
        </style>
    </head>
 
    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>
 
</html>

效果：

可以使用该方法实现垂直居中，需要使用定位。

5.4、缩放 scale

transform:scale(x,y)

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }
 
            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: scale(0.5,1.5);  /*宽度缩小到1半，高度放大到1.5倍*/
            }
        </style>
    </head>
 
    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>
 
</html>

效果：

5.5、斜切扭曲skew

transform:skew(x,y)：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴角度，第二个参数对应Y轴角度。如果第二个参数未提供，则默认值为0

示例：

x30度角时效果：

y30度角时效果：

x30度角，y30度角时的效果：

练习1：

只允许一个div，可以使用CSS3

练习2：

请实现如下效果，可以使用CSS3

六、渐变

在早期IE浏览中的滤镜中就有渐变，Photoshop中也有渐变，可简单的认为渐变就是颜色的平滑过度，CSS3的渐变语法如下：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

<angle>：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <color-stop> 用于指定渐变的起止颜色：
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。

渐变一般应用于需要指定颜色的地方。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .box {
                height: 200px;
                width: 200px;
                float: left;
                margin: 20px;
            }
            #div1{
                background: linear-gradient(orange,navy);
                /*从上到下橙色到蓝色渐变*/
            }
            #div2{
                background: linear-gradient(lightgreen,lightcoral 40%,lightblue);
                /*绿红蓝从上到下渐变，中间的40%表示红出现的位置，如果不指定则均匀分配*/
            }
 
            #div3{
                background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
                /*0度角方向（从下向上）*/
            }
 
            #div4{
                background: linear-gradient(45deg,blue,pink);
                /*目标方向45度角方向*/
            }
 
            #div5{
                background: linear-gradient(to top left,#000,#fff);
                /*从右下到左上的渐变*/
            }
            span{
                font: 50px/50px "microsoft yahei";
                color: linear-gradient(to left,red,blue);
                /*前景色无效,背景有效*/
            }
        </style>
    </head>
 
    <body>
        <div class="box" id="div1">
        </div>
        <div class="box" id="div2">
        </div>
        <div class="box" id="div3">
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>
        <span>
            Hello Linear-Gradient
        </span>
    </body>
</html>

效果：

如果要考虑兼容IE浏览器，可以使用IE中特有的滤镜。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="orange", EndColorStr="navy");
/*老IE中的渐变*/

IE中常用的滤镜：

七、透明

7.1、opacity

设置对象的不透明度。

opacity：<number>

<number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。 0表示完全透明，1表示完全不透明。

示例：

            .box {
                height: 180px;
                width: 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }
            #div1{
                opacity: 0.5;  /*设置半透明*/
                filter:alpha(opacity=50); /*兼容IE，使用滤镜，0-100 */
                background: blue;
                height: 100px;
            }
 
        <div class="box">
            <div id="div1">
            </div>
        </div>

效果：

7.2、transparent与图片透明

用来指定全透明色彩
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

    color: transparent;
    border: 1px solid transparent;
    background: transparent;

常见互联网图片格式，压缩格式：

gif：只255种颜色，透明，动画效果

jpg：色彩丰富（65536），不透明，不支持动画

png：色彩更加丰富，支持透明，不支持动画

7.3、RGBA

RGBA是CSS3中新增用于设置颜色的方法，语法：

RGBA(R,G,B,A)
取值：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A： Alpha透明度。取值0 - 1之间。

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);

示例：

            #div3 {
                /*兼容IE，使用滤镜，0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }
 
        <div class="box">
            <div id="div3">
            </div>
        </div>

效果：

代码：

作业：

请完成如下效果，要求兼容IE8：

八、动画

前端可以使用javascript实现一些简单的动画，但是有很大局限；jQuery解决了部分问题，对于一些小的动画jQuery表示不错，但复杂的过渡效果也无能为力；CSS3中引入了2种动画效果表现不错，分别是过渡动画与帧动画。

8.1、过渡动画

过渡动画可简单理解为是从一个状态过渡到另一个状态间自动生成的动画效果，相对简单。

transition语法：

transition：<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || < single-transition-timing-function> || <time>

<' transition-property '>：检索或设置对象中的参与过渡的属性
<' transition-duration '>：检索或设置对象过渡的持续时间
<' transition-timing-function '>：检索或设置对象中过渡的动画类型
<' transition-delay '>：检索或设置对象延迟过渡的时间

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            body {
                padding: 100px;
            }
 
            #img1 {
                /*所有过渡动画的时间都为1秒*/
                transition: all 1s;
            }
 
            #img1:hover {
                transform: rotate(360deg);
            }
 
            #img2 {
                /*当动画针对width时时间为0.5秒，高度为2秒*/
                transition: width 0.5s, height 2s ease-in;
            }
 
            #img2:hover {
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
 
    <body>
        <img src="img/7.jpg" id="img1" />
        <img src="img/7.jpg" id="img2" width="300" height="200" />
    </body>
 
</html>

效果：

过度动画基本可以针对元素的种属性为尺寸、透明度、颜色等。

8.2、帧动画

也称为补间动画，过度动画中的效果是根据原始状态与目标状态生成的，如果需要控制中间过程则可以使用帧动画。

帧动画需要先定义再使用，使用@keyframes定义，animation调用定义好的动画。

@keyframes语法：

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>： identifier定义一个动画名称

<keyframes-blocks>：定义动画在每个阶段的样式，即帧动画。

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

animation语法：
animation：<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || < single-animation-timing-function> || <time> || < single-animation-iteration-count> || < single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

animation-name ：检索或设置对象所应用的动画名称
animation-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count '>：检索或设置对象动画的循环次数
animation-direction：检索或设置对象动画在循环中是否反向运动
animation-fill-mode：检索或设置对象动画时间之外的状态
animation-play-state：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            /*定义动画 名称为animate1*/
            @keyframes animate1 {
                /*第一帧样式*/
                from {
                    margin-left: 100%;
                    background: orangered;
                }
                /*动画执行到30%时样式*/
                30% {
                    background: lightblue;
                    width: 200px;
                    height: 200px;
                    border-radius: 100px;
                }
                /*动画执行到60%时样式*/
                60% {
                    background: lightgreen;
                    width: 300px;
                    height: 300px;
                    border-radius: 150px;
                }
                /*结束时样式*/
                to {
                    margin-left: 0;
                }
            }
            #div1 {
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: lightcoral;
                /*调用定义的动画，infinite无限制执行，linear动画函数线性动画*/
                animation: animate1 2s infinite linear;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>

效果：

infinite表示动画一直执行，如果只想执行一次，可以删除该关键字。虽然多数动画使用CSS3可以完成，但是动画非常耗资源，特别是在移动端，不建议多用。更加复杂的动画可以使用Canvas

转自互联网

有关css3的一些问题的更多相关文章

纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用 ...
css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

随机推荐

如果你使用上述这段12行的JavaScript代码，就可以能让firefox、chrome、safari浏览器崩溃，而且还能让iphone重启，安卓手机闪退！
<html> <body> <script> var total=""; for (var i=0;i<1000000;i ) { tot ...
Solr多核心及分词器（IK）配置
Solr多核心及分词器(IK)配置多核心的概念多核心说白了就是多索引库.也可以理解为多个"数据库表" 说一下使用multicore的真实场景,比若说,产品搜索和会员信息搜索 ...
Entity Framework 5 自定义代码生成模板转
Entity Framework 5 发布有一定时间了,但学习资源确实不多,更何况英语差的我,看英语确实费力,不管怎么样,问题还是解决了,查看很多人写的文章(让我看的想放弃,更想找到答案),都没有到到 ...
HDU 4945 2048(DP)
HDU 4945 2048 题目链接题意:给定一个序列,求有多少个子序列能合成2048 思路:把2,4,8..2048这些数字拿出来考虑就能够了,其它数字不管怎样都不能參与组成.那么在这些数字基础上 ...
开始DDD
如何开始DDD(完) 连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public ...
Visual Studio 当前不会命中断点的问题
这个问题一般有两个版本 1.当前不会命中断点,还没有为该文档加载任何符号. 2.当前不会命中断点,源代码与原始版本不同. 要解决第一个问题,就要了解一种文件格式“PDB(Program DataBas ...
Linux 下安装 SVN服务器
前段时间换了一个新项目组.过去发现居然SVN都没有.代码都是手动对比存档.当时就蛋疼了.这他妈也太苦逼了.话不多说,要来测试服务器地址.开工了.由于服务器不能连接外网. 1.先下载安装包.本次安装不结 ...
c#一个简单的实例告诉你，多继承还可以这么来
我想多继承,要怎么搞???我想你一定会说“接口”,那么你有没有遇到这样的问题,你需要在一个类中继承另外2个类的所有方法,你要怎么做呢???难道要Coyp实现代码?No,往下看... 定义一个空接口比如 ...
C add
C++学习--应用篇(Windows/Linux)(书籍推荐及分享) 我将以平台划分,分别介绍Windows和Linux下个人认为的好书(与基础篇一样,大部分网络上都有电子版): 对于C++基础类的图 ...
EasyUI实现异步加载tree(整合Struts2)
首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/ja ...

有关css3的一些问题

一、阴影

1.1、文字阴影

1.2、盒子阴影

二、背景

2.1、背景图像尺寸

2.2、背景图像显示的原点

三、伪元素

3.1、before

3.2、after

3.3、清除浮动

四、圆角与边框

4.1、border-radius 圆角

4.2、边框图片border-image

五、变形 transform

5.1、rotate()2D旋转

5.2、设置原点 transform-origin

5.3、平移 translate()

5.4、缩放 scale

5.5、斜切扭曲skew

六、渐变

七、透明

7.1、opacity

7.2、transparent与图片透明

7.3、RGBA

八、动画

8.1、过渡动画

8.2、帧动画

有关css3的一些问题的更多相关文章

随机推荐

热门专题