整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
看下效果圖
對基于CSS的設計最初的批評意見之一是CSS太死板了，只能建立方框，因此本次我們需要用圖形軟件創建下面兩個圖形，一個用于頂部，一個用于底部。
接下來我們詳細介紹它的實現方法：
1.創建一個簡單的框標記并輸入相關內容
<div class="box">
<h2>笑話</h2>
<p>朋友圈里，有這么一條：“和女友分手后一直很不安，害怕她會變壞，胡亂約炮，太過放縱，怎么辦？”下面神回復：“其他人的惡劣行徑頂多是占著茅坑不拉屎，你這是出了廁所還想鎖門。”</p>
</div>
2.將頂部圖像用于標題的背景置于頂部（左上角），將底部圖像用于DIV框的背景置于底部（左下角），然后給DIV框添加相同的背景顏色并設置一定的寬度，三者共同形成框的主體。
.box{width:275px;
background:#ef1111 url(bottom.jpg ) no-repeat left bottom;}
.box h2{background:url(top.jpg) no-repeat left top;}
3.調整兩個背景圖像的尺寸，寬度與DIV框的寬度一致，使其看起來更像一個整體
.box{width:275px;
background:#ef1111 url(bottom.jpg ) no-repeat left bottom;
background-size:275px;}
.box h2{background:url(top.jpg) no-repeat left top;
background-size:275px;}
4.最后為了不使內容與邊框靠的太近可以添加一些內邊距或并居中對齊即可
.box{width:275px;
background:#ef1111 url(bottom.jpg ) no-repeat left bottom;
background-size:276px;
margin:0 auto;}
.box h2{background:url(top.jpg) no-repeat left top;
background-size:276px;
padding-top:30px;
text-align:center;}
.box p{padding:0 5px 30px 5px;}
尺寸根據自己的需要設定，如下圖：
建企業網站時使用CSS邊框圓角是很容易的事，但要設置邊框圓角的漸變效果就需要費些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調整好性能的數值就可以靈活運用了。
想要實現CSS圓角漸變并匹配內容背景圖可以參考以下代碼：
<style>
div {
width: 500px;
height: 300px;
margin: 10px;
padding: 30px;
border-radius: 50px; /*設置圓角*/
border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
background-origin:border-box; /*從邊框開始背景圖*/
background-clip:padding-box,border-box; /*設置第一個背景和第二個背景的范圍*/
background-size:cover;
/*由于背景圖像不能設置純色，所以可以使用下面的方式設置純色*/
background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30);
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>
<div>
<span class="a1">邊框漸變色從內邊框到邊框，背景圖像單獨設置不重復。</span>
</div>background-origin表示的是背景起始位置，其三個值如下，依次是
border-box 從邊框開始；
padding-box(默認) 從內邊距開始；
content-box 從內容開始。
background-origin: border-box | padding-box(默認) | content-box
background-clip表示的是背景填充位置，其四個值如下，依次是
border-box(默認) 填充至邊框；
padding-box 填充至內邊距；
content-box 填充之內容；
text 作為字體前景色。
background-clip: border-box(默認) | padding-box | content-box | text
background-size表示的是背景尺寸，其五個值如下，依次是
contain 將圖像擴大至適應最短的邊，剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊，圖像可能顯示不完整
length 兩個值依次設置圖像寬和高，未設置則為auto
percentage 兩個百分比依次設置圖像寬和高，未設置則為auto
auto 默認設置
角屬性border-radius屬性，一個比較簡單但用處很大的一個重要css3屬性，繪制圓形、圓角矩形 、橢圓形。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
