CSS3边框与背景高级技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/Meatball_MMY/article/details/89960208

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>

效果展示：