css3_边框与背景

Css3只能在ie8以上的版本才能用。

1. 边框圆角

<div class="radius">边框圆角</div>

.radius{width:200px;height:100px;border:1px solid red;margin:50px auto;

border-radius:20px;

border-top-left-radius:20px;

border-top-right-radius:30px;

border-bottom-right-radius:40px;

border-bottom-left-radius:5px;

}

 

 

2. 边框阴影

<div class="shadow">边框阴影</div>

.shadow{

width:200px;height:100px;border:1px solid red;margin:50px auto;

/*水平 垂直 模糊半径 扩展半径 颜色*/

box-shadow:2px 3px 4px 5px #00CCFF;

}

 

<div class="shadow_inset">边框向内阴影</div>

.shadow_inset{width:200px;height:100px;border:1px solid red;margin:20px auto;

box-shadow:inset 0px 0px 9px 2px #00CCFF;

}

 

 

3. 背景

<div class="background">

<p>

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。<br />

background-size<br/ >

background-origin<br/ >

</p>

</div>

.background{width:600px;height:300px;border:1px solid red;margin:10px auto;

background:url("images/RAV4.jpg") no-repeat;

}

 

1.指定背景大小

.background{width:600px;height:300px;border:1px solid red;margin:10px auto;

background:url("images/RAV4.jpg") no-repeat;

background-size:500px 250px;

}

指定大小为宽500px 高25px，如图：

 

指定大小为比例，宽100% 高80%，如图：

 

按比例放缩的情况下最大化，不超出容器（容器可能有空白）

 

按比例放缩，填充满容器（图片可能部分在容器外）