一凿掂、圖片庫(kù)
<style type="text/css">
.pic{
float: left;
padding: 2px;
width: auto;
height: auto;
border: 1px solid #ccc;
margin: 3px;
text-align: center;
}
.pic img{
border:1px solid #ccc;
display: inline;
margin: 3px;
}
.pic img:hover{
border: 1px solid #000;
}
.content{
text-align: center;
}
</style>
<div class="pic">
<a href="#"></a>
<div class="content">XXXXXX</div>
</div>
<div class="pic">
<a href="#"></a>
<div class="content">XXXXXX</div>
</div>
<div class="pic">
<a href="#"></a>
<div class="content">XXXXXX</div>
</div>
<div class="pic">
<a href="#"></a>
<div class="content">XXXXXX</div>
</div>
二犯祠、CSS 圖像透明/不透明
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來(lái)設(shè)定透明度溯街。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0祭犯。值越小墓懂，越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)七蜘。x 能夠取的值從 0 到 100谭溉。值越小，越透明橡卤。
1扮念、圖像透明度 - Hover 效果
.pic img{
border:1px solid #ccc;
display: inline;
margin: 3px;
opacity: 0.4;
width: 250px;
height: 200px;
}
.pic img:hover{
border: 1px solid #000;
opacity: 1
}
2、透明框中的文本
<style type="text/css">
.contentbox{
background: url("images/2.jpg");
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.transbox{
width: 300px;
height: 300px;
margin: 50px;
background-color: #fff;
opacity: 0.5
}
.transbox p{
padding: 30px;
}
</style>
<div class="contentbox">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.</p>
</div>
</div>
三碧库、CSS2 媒介類型
@media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式柜与。
四、CSS3 邊框
1嵌灰、圓角邊框和陰影
四個(gè)值: 第一個(gè)值為左上角弄匕，第二個(gè)值為右上角，第三個(gè)值為右下角沽瞭，第四個(gè)值為左下角迁匠。
<style type="text/css">
.radius{
border: 1px solid #000;
border-radius: 20px;
padding: 20px;
box-shadow: 5px 5px 5px #ccc;
}
</style>
<div class="radius">
this is a demo
</div>
2、邊界圖片
<style type="text/css">
.radius{
-webkit-border-image:url(images/3.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(images/3.png) 30 30 round; /* Opera */
border-image:url(images/3.png) 30 30 round;
}
</style>
<div class="radius">
this is a demo
</div>
五秕脓、CSS3 背景
1柒瓣、background-size 屬性
<style type="text/css">
.radius{
background: url("images/2.jpg") no-repeat;
background-size: 80px 100px;
padding: 100px;
}
</style>
<div class="radius">
this is a demo
</div>
2、background-Origin屬性
3吠架、background-clip屬性
<style type="text/css">
#example1 {
border: 10px dotted black;
padding:15px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding:15px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding:15px;
background: yellow;
background-clip: content-box;
}
</style>
<p>沒(méi)有背景剪裁 (border-box沒(méi)有定義):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
六芙贫、 漸變（Gradients）
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
- 徑向漸變（Radial Gradients）- 由它們的中心定義
線性漸變 - 從上到下（默認(rèn)情況下）
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}
線性漸變 - 從左到右
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}
線性漸變 - 對(duì)角
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}
使用角度
角度是指水平線和漸變線之間的角度，逆時(shí)針?lè)较蛴?jì)算傍药。換句話說(shuō)磺平，0deg 將創(chuàng)建一個(gè)從下到上的漸變，90deg 將創(chuàng)建一個(gè)從左到右的漸變拐辽。
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(0deg, red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(90deg, red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
}
</style>
使用多個(gè)顏色結(jié)點(diǎn)
<style type="text/css">
div.hk{ height: 200px;
background: linear-gradient(red 10%, yellow 20%, blue 30% ,green 40%);
background: -webkit-linear-gradient(red 10% , yellow 20% ,blue 30% ,green 40%);
background: -o-linear-gradient(red 10% , yellow 20%, blue 30%, green 40%);
background: -moz-linear-gradient(red 10% , yellow 20% ,blue 30% green 40%);
}
</style>
<div class="hk">this is a demo.</div>
使用透明度（Transparency）
為了添加透明度拣挪，我們使用 rgba() 函數(shù)來(lái)定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值俱诸，它定義了顏色的透明度：0 表示完全透明菠劝，1 表示完全不透明。
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
}
重復(fù)的線性漸變
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
}
CSS3 徑向漸變
為了創(chuàng)建一個(gè)徑向漸變睁搭，你也必須至少定義兩種顏色結(jié)點(diǎn)赶诊。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)园骆，你也可以指定漸變的中心舔痪、形狀（原型或橢圓形）、大小锌唾。默認(rèn)情況下锄码，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）滋捶。
規(guī)則分布
div.hk{
height: 150px;
widows: 200px;
background:radial-gradient(red,green,blue);
background: -webkit-radial-gradient(red,green.blue);
background: -moz-radial-gradient(red,green,blue);
background: -o-radial-gradient(red,green,blue);
}
不規(guī)則分布
div.hk{
height: 150px;
widows: 200px;
background:radial-gradient(red 10%,green 30%,blue 20%);
background: -webkit-radial-gradient(red 10%,green 30%,blue 20%);
background: -moz-radial-gradient(red 10%,green 30%,blue 20%);
background: -o-radial-gradient(red 10%,green 30%,blue 20%);
}
設(shè)置形狀
shape 參數(shù)定義了形狀痛悯。它可以是值 circle 或 ellipse。其中炬太，circle 表示圓形灸蟆，ellipse 表示橢圓形。默認(rèn)值是 ellipse亲族。
