一啃沪，邊框
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">這里，圖像平鋪（重復）來填充該區(qū)域铐刘。</div>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域械筛。</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 背景區(qū)域位置
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;/到邊緣位置/
