《精通CSS》读书笔记2

发表于 | 分类于 ，

第4章 背景图像效果

4.1背景图像基础

  • 设置背景图片位置的方式
1
2
3
4
5
background-position:left center;
// 像素定位是将图像左上角定位到父元素距离20px的位置
background-position:20px 20px;
// 百分数定位是将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置
background-position:20% 20%;

4.2圆角框

  • border-image属性详细了解

http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/

  • px、em、rem的区别：
  • px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
  • em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
  • rem 的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数。

第5章 对链接应用样式

5.6用CSS3实现翻转

1
2
3
<body>
   <a href=#>book</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
 display:block;
 width:6.6em;
 height:1.4em;
 line-height:1.4;
 text-align:center;
 text-decoration:none;
 border:1px solid #66a300; 
 background-color:#8cca12;
 -moz-border-radius:6px;
  -webkit-border-radius:6px;
  color:#fff;
  text-shadow:2px 2px 2px #66a300;
  -moz-box-shadow:2px 2px 2px #ccc;
  -webkit-box-shadow:2px 2px 2px #ccc;
  box-shadow:2px 2px 2px #ccc;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));
}
-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));

有倒影的按钮

5.7纯CSS工具提示

1
2
3
4
<p>
 <a href="http://www.andybudd.com/"  class="tooltip">
 Andy Budd<span>(This website rocks)</span></a>is a web developer based in Brighton England.
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a.tooltip{
  position:relative;
  }
a.tooltip span {
  display: none;
}
a.tooltip:hover span {
  display: block;
  position: absolute;
  width:200px;
  top: 1em;
  left: 2em;
  padding:0.2em 0.6em;
  border:1px solid #996633;
  background-color: #FFFF66;
  color:#000;
}

工具提示