【一起来烧脑】一步学会CSS3体系

标题图

CSS3 完全向后兼容

选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

CSS3.png

image.png

<style> 
div
{
    border:2px solid black;
    padding:10px 40px; 
    background:pink;
    width:200px;
    border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>

box-shadow属性被用来添加阴影

image.png

<style> 
div
{
    width:200px;
    height:100px;
    background-color:pink;
    box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div>盒阴影</div>
</body>

border-image 属性允许指定一个图片作为边框

<style> 
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}
#round
{
    -webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(img/border.png) 30 30 round; /* Opera */
    border-image:url(img/border.png) 30 30 round;
}
#stretch
{
    -webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(img/border.png) 30 30 stretch; /* Opera */
    border-image:url(img/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="img/border.png" />
</body>

background-image属性添加背景图片 background-size指定背景图像的大小 background-origin属性指定了背景图像的位置区域

div
{
    border:1px solid black;
    padding:35px;
    background-image:url(img/smile.png);
    background-repeat:no-repeat;
    background-position:left;
}
#div1
{
    background-origin:border-box;
}
#div2
{
    background-origin:content-box;
}

CSS3 文本效果

text-shadow 可向文本应用阴影

image.png

<style>
h1
{
    text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<h1>文本阴影效果</h1>

word-wrap属性允许文本强制换行

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

image.png

CSS3 字体

@font-face规则

<style> 
@font-face
{
font-family: myFirstFont;
src: url('.ttf'),
       url('.eot'); /* IE9+ */}
div
{
font-family:myFirstFont;
}
</style>

CSS3 2D转换

2D转换方法translate()

left（x 轴）和 top（y 轴）

div
{
transform: translate(50px,25px);
-ms-transform: translate(50px,25px);       /* IE 9 */
-webkit-transform: translate(50px,25px);   /* Safari and Chrome */
-o-transform: translate(50px,25px);        /* Opera */
-moz-transform: translate(50px,25px);      /* Firefox */
}

image.png

2D转换方法rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。

div
{
transform: rotate(45deg);
-ms-transform: rotate(45deg);      /* IE 9 */
-webkit-transform: rotate(45deg);  /* Safari and Chrome */
-o-transform: rotate(45deg);       /* Opera */
-moz-transform: rotate(45deg);     /* Firefox */
}

image.png

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

div
{
transform: scale(1.5,3);
-ms-transform: scale(1.5,3);   /* IE 9 */
-webkit-transform: scale(1.5,3);   /* Safari 和 Chrome */
-o-transform: scale(1.5,3);    /* Opera */
-moz-transform: scale(1.5,3);  /* Firefox */
}

skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

div
{
transform: skew(15deg,30deg);
-ms-transform: skew(15deg,30deg);  /* IE 9 */
-webkit-transform: skew(15deg,30deg);  /* Safari and Chrome */
-o-transform: skew(15deg,30deg);   /* Opera */
-moz-transform: skew(15deg,30deg); /* Firefox */
}

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 */
}

CSS3 3D转换

3D转换方法rotateX()

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

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);   /* Firefox */
}

3D转换方法rotateY()

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

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);   /* Firefox */
}

CSS3 过渡

div:hover{width:300px;}

div
{
transition: width 1.5s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;  /* Opera */}

CSS3 动画

@keyframes规则

多列

column-count属性规定元素应该被分隔成几列。

div
{
column-count:5;
-moz-column-count:5;   /* Firefox */
-webkit-column-count:5; /* Safari 和 Chrome */
}

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

div
{
column-gap:40px;
-moz-column-gap:40px;       /* Firefox */
-webkit-column-gap:40px;    /* Safari 和 Chrome */
}

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

div
{
column-rule:5px outset pink;
-moz-column-rule:5px outset pink; /* Firefox */
-webkit-column-rule:5px outset pink;  /* Safari and Chrome */
}

image.png

CSS3 用户界面

div
{
resize:both;
overflow:auto;
}

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

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;  /* Safari */
width:50%;
float:left;
}

image.png

<style> 
div
{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid pink;
    outline-offset:15px;
} 
</style>

image.png