本篇教程探讨了CSS3背景的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。 

一，边框

1.圆角边框 boder-radius:

可以设置：

boder-radius:1px solid (实线) +颜色

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

2.边框阴影 box-shadow:

可以设置：box-shadow：10px(右边阴影) 10px（下边阴影） 5px（阴影清晰度） +阴影颜色

3.边界图片代码及效果图

<style> div{

    border:15px solid transparent;

    width:250px;

    padding:10px 20px;}#round{

    border-image:url(border.png) 30 30 round;}#stretch{

    border-image:url(border.png) 30 30 stretch;}</style><p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p><p> border-image 属性用于设置图片的边框。</p><div id="round">这里，图像平铺（重复）来填充该区域。</div><div id="stretch">这里，图像被拉伸以填充该区域。</div><p>这是我们使用的图片素材：</p><img src="/images/border.png" />

注意：border-image 属性用于设置图片的边框，控制属性后面的两个参数，来调整图片的拉伸或平铺的大小。

二，圆角属性

1.圆角边框的设置

  border-radius: 25px;/*圆角*/

  background: #8AC007;/*背景颜色设置*/

  border: 2px solid #8AC007;/*边框颜色的设置*/

  background: url(paper.gif);/*背景图片的设置*/

  background-position: left top;/*图片相对位置*/

  background-repeat: repeat;/*图片平铺*/

  padding: 20px; /*边框的内边距*/

  width: 200px;/*边框的宽和高*/

  height: 150px;```

2.圆角属性
border-radius 所有四个边角 border-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

三.CSS背景

css背景属性包括：

background-image 背景图片
background-size 背景图片大小
background-origin 背景区域位置
background-clip 背景剪裁属性是从指定位置开始绘制

1.background-image属性

    /*设置方式一：可以给不同的图片设置多个不同的属性。*/

     background: url(img_flwr.gif) right bottom no-repeat, /*引入浮动的图画1,右下角，不重复*/

     url(paper.gif) left top repeat; /*背景图片2，左上角，重复*/

     padding: 15px;

   /*设置方式二：不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。*/

    background-image: url(img_flwr.gif), url(paper.gif);/*直接引入两张图片*/

    background-position: right bottom, left top;/*设置两个图片的位置，右下角，左上角*/

    background-repeat: no-repeat, repeat;/*对应设置，不重复，重复*/

    padding: 15px;

4.background-size 属性

   background:url(/try/demo_source/img_flwr.gif);

   background-size:80px 60px;// 缩小图片，第一个参数宽度，第二个参数长度

   background-repeat:no-repeat;

   padding-top:40px;

   原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162">

5.background-Origin属性

 div{  border:1px solid black;

    padding:35px;

    background-image:url('smiley.gif');

    background-repeat:no-repeat;

    background-position:left;}

  #div1{

    background-origin:content-box;}/*背景图像的相对位置的内容框*/

  #div2{

    background-origin:border-box;}/*背景图像边界框的相对位置*/

6.background-clip属性

背景剪裁属性是从指定位置开始绘制
background-clip: content-box;/主要内容部分/
background-clip: padding-box;/到边缘位置/

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！