1.css3 边框
border-radius |
创建边框圆角 |
box-shadow |
添加盒子阴影 |
border-image | 使用图像创建一个边框 |
用法举例:
(1)边框圆角
<div class="box"></div>
<style>
.box{
width: 100px;
height: 100px;
border:2px solid;
border-radius:25px;
}
</style>
效果展示:
(2)盒子阴影
<div class="box"></div>
<style>
.box{
width: 100px;
height: 100px;
border:2px solid;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
}
</style>
效果展示:
(3)使用图像创建边框
<div id="round">平铺</div>
<br>
<div id="stretch">拉伸</div>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(../image/bee.jpg) 30 30 round;
-o-border-image:url(../image/bee.jpg) 30 30 round;
border-image:url(../image/bee.jpg) 30 30 round;
}
#stretch
{
-webkit-border-image:url(../image/bee.jpg) 30 30 stretch;
-o-border-image:url(../image/bee.jpg) 30 30 stretch;
border-image:url(../image/bee.jpg) 30 30 stretch;
}
</style>
效果展示:
2.css3 背景
background-size | 指定背景图像的大小 |
background-origin | 指定背景图像位置区域 |
(1)大小
<body>
<p>
那就对你说一声欢迎光临。
</p>
</body>
<style>
body
{
background:url(../img/bee.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
效果展示:
(2)位置
<p>背景图像边界框的相对位置:</p>
<div id="div1">
在无人的海岛上有美丽风景。
</div>
<p>背景图像的相对位置的内容框:</p>
<div id="div2">
我开始美丽的际遇。
</div>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url(../image/bee.jpg);
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
效果展示: