1、当鼠标放到图片上，图片会旋转一定的角度，i{background: url(../images/lobg.png) no-repeat; width:30px; height:30px;}
i:hover{background-position:
0 -30px; transition: all .4s ease-out;}2、鼠标放在圆形图片中，图片渐渐的变方形img{border-radius:50%;transition:
all .4s ease-out；}
a:hover
img{border-radius:0px；}3、长字拆分换行p
{word-wrap:break-word;}允许对长单词进行拆分，并换行到下一行：4、改变背景图大小background-size:63px
100px; 改变背景图片大小
background-size:40%
100%;对背景图片进行拉伸，使其完成填充内容区域：
background-origin:content-box;背景图片可以放置于
content-box、padding-box 或 border-box 区域。5、边框阴影text-shadow:
5px 5px 5px #FF0000;您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
6、当鼠标放到菜单或者图片上时，菜单或图片会渐渐的移动
a{transition:all
0.3s ease-out 0s;color:#000;} a:hover{margin-left:5px;
text-decoration:none;}7、自定义字体的使用（IE9+）<style>
@font-face
{
font-family:
myFirstFont;
src:
url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>8、圆角边框border-radius:2px;box-shadow:
10px 10px 5px #888888;border-image:url(border.png)
30 30 round;-moz-border-radius:25px;
/* 旧版 Firefox */来自w3cfuns.com
- 2 回答
- 4 关注
- 1518 浏览
添加回答
举报
0/150
提交
取消