-
border-image：用既有的图片做边框
最后一个参数代表边框的方式:
round(平铺)
repeat(重复)
stretch(拉伸)
查看全部 -
box-shadow
阴影模糊半径：只能是正值
阴影扩展半径：可正可负
查看全部 -
box-shadow
外部阴影：x>0右 x<0左
y>0下 y<0上
x和y的数值决定阴影的粗细
内部阴影方向与外部阴影正好相反
查看全部 -
border-radius
参数：从左上角顺时针
查看全部 -
Responsive设计： 脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>
查看全部 -
Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。
查看全部 -
媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：
查看全部 -
一、媒体类型
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：
值
设备类型
All
所有设备
Braille
盲人用点字法触觉回馈设备
Embossed
盲文打印机
Handheld
便携设备
Print
打印用纸或打印预览视图
Projection
各种投影设备
Screen
电脑显示器
Speech
语音或音频合成器
Tv
电视机类型设备
Tty
使用固定密度字母栅格的媒介，比如电传打字机和终端
其中Screen、All和Print为最常见的三种媒体类型
查看全部 -
css3动画
查看全部 -
圆角border-radius左上 右上 右下 左下
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重背景</title>
<style type="text/css">
.demo{
width: 300px;
height: 140px;
border: 1px solid #999;
background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg),
url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg),
url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
margin:0 0 20px 0;
}
.task {
width: 300px;
height: 140px;
border: 1px solid #999;
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 75% 60%,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 50% 35%;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="task"></div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
width:100px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-origin:content-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:59px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap"><span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>
查看全部 -
这里要注意的是你要理解background多背景的两种语法书写形式：语法拆分和语法缩写，这个你在这个章节也能看到。
你所提到的 “/”是在background进行语法缩写的时候使用的，而background多背景语法缩写的写法如下（以课程为例）：
.demo {background:url(image1) no-repeat position1/size1 ,url(image2) no-repeat position2/size2, url(image3) no-repeat position3/size3;}转为实际的代码如下：
.demo { width: 300px; height: 140px; border: 1px solid #999; background: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg) no-repeat, url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg) no-repeat 100px 0/50px 88px, url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg) no-repeat 200px 0/50px 88px; }这样就能达到你所说的效果了，当然如果是使用拆分的语法书写代码的话，就不用考虑这个“/”的问题了。
查看全部 -
缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5);} 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。查看全部 -
Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
查看全部
举报