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.边界图片代码及效果图

round是图片平铺来填充边框
stretch是图片拉伸填充边框

<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" />

效果图：

QQ图片20180410222734.png

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

属性	说明	css
border-image	设置所有边框图像的速记属性	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

二，圆角属性

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;

效果图 QQ图片20180413222515.jpg

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;}/*背景图像边界框的相对位置*/

效果图： QQ图片20180413225002.png

6.background-clip属性

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