对css3的掌握其实也挺熟了，只是一时没有总结，所以问到我css3新增的属性时一时就答不上来。。好记性不如烂笔头，自己在笔记本上写写画画来了波复习，我决定把总结的知识搬到这来。哼哼
边框
1、border-radius:圆角边框
2、box-shadow:边框阴影
3、border-image:图片边框
border-radius:百分比| 像素值
.container{
width:200px;
height:200px;
border:1px solid #ccc;
border-radius:20px;
-moz-border-radius:20px;/*老火狐*/
/*border-radius:50%; 百分比形式*/
}
效果图：
兼容性:Internet Explorer 9+,Firefox、Chrome 以及 Safari 支持
.
.
box-shadow:x-shadow y-shadow blur spread color inset
参数依次为：水平阴影 垂直阴影 模糊程度 阴影大小 阴影颜色 内阴影还是外阴影
内阴影
.container{
width:200px;
height:200px;
box-shadow:2px 2px 3px 4px #ccc inset;
-moz-shadow:2px 2px 3px 4px #ccc inset;
}
效果:
外阴影:
.container{
width:200px;
height:200px;
box-shadow:2px 2px 3px 4px #ccc;
-moz-shadow:2px 2px 3px 4px #ccc;
}
效果图
下面是我们浏览网页的时候常见的单边没有阴影的效果
.container{
width:200px;
height:200px;
box-shadow:0px 4px 4px 2px #ccc;
-moz-shadow:0px 4px 4px 2px #ccc;
}
效果图：
.container{
width:200px;
height:200px;
box-shadow:0px -4px 4px 2px #ccc;
-moz-shadow:0px -4px 4px 2px #ccc;
}
效果图：
.container{
width:200px;
height:200px;
box-shadow:4px 0px 4px 2px #ccc;
-moz-shadow:4px 0px 4px 2px #ccc;
}
效果图：
.container{
width:200px;
height:200px;
box-shadow:-4px 0px 4px 2px #ccc;
-moz-shadow:-4px 0px 4px 2px #ccc;
}
兼容性：
border-image:图片边框
定义和用法
border-image 属性是一个简写属性，用于设置以下属性：
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值，会设置其默认值。
栗子：
请查看w3cschool栗子：http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image
.
.
.
.
圆角
1、边框圆角：请看上面边框里的栗子
2、背景色圆角
3、背景图片圆角
背景色圆角
.container{
width:200px;
height:200px;
background:pink;
border-radius:20px;
}
效果:
背景图片圆角:
.container{
width:200px;
height:200px;
background:url('images/1.jpg');
border-radius:20px;
}
效果:
.
.
.
.
背景
属性:
background-image:背景图片
background-size:背景图片大小
background-origin:背景图片的定位content-box,padding-box,border-box
background-clip:规定背景的绘制区域
前缀:-webkit- -ms- -moz-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>背景图像边界框的相对位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的相对位置的内容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
区分content-box,padding-box,border-box图
兼容性:
.
.
.
.
渐变
1、线性渐变
2、径向渐变
线性渐变linear-gradient：渐变起始位 颜色
.container{
width:500px;
height:300px;
background:-webkit-linear-gradient(left,pink,yellow,blue);
background:-o-linear-gradient(left,pink,yellow,blue);
background:-moz-linear-gradient(left,pink,yellow,blue);
background:linear-gradient(left,pink,yellow,blue);
}
效果图
.container{
width:500px;
height:300px;
background:-webkit-linear-gradient(left bottom,pink,yellow,blue);
background:-o-linear-gradient(left bottom,pink,yellow,blue);
background:-moz-linear-gradient(left bottom,pink,yellow,blue);
background:linear-gradient(left bottom,pink,yellow,blue);
}
效果图：
径向渐变radial-gradient
语法:
background: radial-gradient(center, shape size, start-color, ..., last-color)
.container{
width:500px;
height:300px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
效果图：
指定形状的径向渐变：
.container{
width:300px;
height:300px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 *//
}
效果图:
兼容性：IE10+
.
.
.
.
.
文本效果
1、text-shadow
2、box-shadow
3、text-overflow
4、word-wrap
5、word-break
文本阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
效果：
box-shadow:上面已经讲述，此处不再讲
text-overflow:文本的溢出
text-overflow:clip;裁切
text-overflow:ellipsis出现省略号
出现省略号
.container{
width:300px;
max-height:20px;
border:1px solid #ccc;
white-space:nowrap;/*不设置这个属性省略号不出现*/
overflow:hidden;
text-overflow:ellipsis;
}
.container{
width:300px;
max-height:20px;
border:1px solid #ccc;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
word-wrap:break-word;
word-break:break-all
此两项都是用于对文字换行的处理，不多加赘述;
.
.
.
.
.
字体
@font-face:自定义字体
@font-face
{
font-family: myFirstFont; /*自定义字体名称，下面引用的字体名称与该名称一致*/
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */ /*自定义字体的存放路径*/
}
div
{
font-family:myFirstFont;
}
兼容性：
.
.
.
.
.
2D转换
transform:scale | translate | skew | rotate | matrix
旋转：transform:rotate(deg)
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform:rotate(20deg);
}
transform:translate(x坐标，y坐标)
当只有一个值时默认为x坐标
transform:translateY(值)
transform:translateX(值）
向右偏移100px
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:translate(100px);
-webkit-transform:translate(100px);
-o-transform:translate(100px);
-moz-transform:translate(100px);
transform:translate(100px);
}
向左偏移
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:translate(-100px);
-webkit-transform:translate(-100px);
-o-transform:translate(-100px);
-moz-transform:translate(-100px);
transform:translate(-100px);
}
向上偏移
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:translateY(-100px);
-webkit-transform:translateY(-100px);
-o-transform:translateY(-100px);
-moz-transform:translateY(-100px);
transform:translateY(-100px);
}
向下偏移
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:translateY(100px);
-webkit-transform:translateY(100px);
-o-transform:translateY(100px);
-moz-transform:translateY(100px);
transform:translateY(100px);
}
向左偏移100px向下偏移100px
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
transform:translate(100px,100px);
}
transform:scale(0-1)缩放
.container{
width:200px;
height:200px;
background:pink;
-ms-transform:scale(0.5);
-webkit-transform:scale(0.5);
-o-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
}
缩放前：
缩放后:
transform:skew(Xdeg,Ydeg)翻转
.container{
width:200px;
height:200px;
background:pink;
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
翻转前：
翻转后:
.
.
.
.
.
3D转换
个人理解就是2d变换中多加Z轴
3d变换用得最多的就是卡片翻转的效果了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width:500px;
height:300px;
float:left;
margin-top:20px;
position:relative;
box-sizing:border-box;
perspective:800px;/*透视，视角，设置在父元素实现3d效果*/
}
.Before{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-position:center center;
backface-visibility:hidden;/*背面隐藏*/
transition:1s;
}
.After{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
color:#fff;
background-color:dodgerblue;
text-indent:2em;
transform:rotateY(-180deg);/*翻转180度就到了背面，再设置背面隐藏*/
backface-visibility:hidden;
transition:1s;
}
.container:hover .Before{
transform: rotateY(180deg);
}
.container:hover .After{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="container">
<div class="Before" style="background-image:url(images/1.jpg)"></div>
<div class="After">梦想是要有的</div>
</div>
</body>
</html>
本篇完