4.2圆角框
4.2.1传统方法
1.上下两个圆角
2.上下两个圆角，中间长矩形repeat-y
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
.box{
width:424px;
background:url(images/tile2.gif) repeat-y;
}
.box h2{
background: url(images/top2.gif) no-repeat left top;
}
.box .last{
background: url(images/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2,.box p{
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>Headline</h2>
<p>content
content
</p>
<p class="last"><a href="images/bottom2.gif" title="test">test</a></p>
</div>
</body>
</html>
</pre>
3.滑动门技术
- 四个背景图，top-left、top-right、bottom-left和bottom-right.
- 底部图像和框同高
- html结构：
<code>
<div class="box">
<div class="box-outer">
<divc class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
</code> - 图片应用的位置：
bottom-left——box
bottom-righ——box-out
top-left——box-inner
top-right——标题 - CSS代码：
<code>
.box{
width:20em;
background:#effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer{
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1em;
}
.box-inner{
background: url(images/top-left.gif) no-repeat left top;
}
.box h2{
background: url(images/top-right.gif) no-repeat right top;
padding-left: 1em;
padding-right: 1em;
}
</code>
4.山顶角技术
- 创建四个角的位图角蒙版
- 白色的蒙版将覆盖背景色，产生曲线效果
- html框架与滑动门一样
- CSS与滑动门一样，但是可以主框div上背景色
4.2.2 CSS3方法
1.同时添加多个图像
- 由于之前只能一次添加一个图像，所以需要多个<div>
- 可以只用一个<div>,同时添加四个图像
- html结构：
<code>
<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>
</code> - CSS代码
2、border-radius
直接在CSS中用border-radius属性
4.3投影
1.来自基础的方法
- 创建与原图片一样大小的底图
- 图像放在div容器中
-
<div>设置<float> - img外边距margin负偏移
or 图片设置为相对定位
2.CSS3方法
- 直接对图片设置
{box-shadow：apx bpx cpx #ddd}属性
a和b:偏移量
c:阴影宽度
d:颜色
ps直接设置box-shadow时也可以同时设置border-radius属性
4.4不透明度
1.CSS方法
.alret{backgroud-color:#000
border-radius:2em;
opacity:0.8;
filter:alpha(opacity=80);/proprietary IE code/}
2.RGBa方法
设置a
.alret{backgroud-color:rgba（0,0,0,0.8）;
border-radius:2em;}
3.PNG透明度
完全不懂..............
4.CSS视差效果
不太懂这个效果究竟是什么意思，代码如下：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body{
background-image: url();
background-repeat: repeat-x;
background-color: #d3ff99;
background-position: 20% 0;
}
.midground{
background-image: url();
background-repeat: repeat-x;
background-color: transparent;
background-position: 40% 0;
}
.foreground{
background-image: url();
background-repeat: repeat-x;
background-color: transparent;
background-position: 150% 0;
}
</style>
</head>
<body>
<div class="midground">
<div class="foreground">
<p>content</p>
</div>
</body>
</html>
</pre>
