一，边框
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;/到边缘位置/
