4.2圓角框
4.2.1傳統(tǒng)方法
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.山頂角技術
- 創(chuàng)建四個角的位圖角蒙版
- 白色的蒙版將覆蓋背景色，產(chǎn)生曲線效果
- 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.來自基礎的方法
- 創(chuàng)建與原圖片一樣大小的底圖
- 圖像放在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>
