整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
看下效果圖
對基于CSS的設計最初的批評意見之一是CSS太死板了，只能建立方框，因此本次我們需要用圖形軟件創(chuàng)建下面兩個圖形，一個用于頂部，一個用于底部。
接下來我們詳細介紹它的實現(xiàn)方法：
1.創(chuàng)建一個簡單的框標記并輸入相關內(nèi)容
<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.調(diào)整兩個背景圖像的尺寸，寬度與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.最后為了不使內(nèi)容與邊框靠的太近可以添加一些內(nèi)邊距或并居中對齊即可
.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;}
尺寸根據(jù)自己的需要設定，如下圖：
建企業(yè)網(wǎng)站時使用CSS邊框圓角是很容易的事，但要設置邊框圓角的漸變效果就需要費些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調(diào)整好性能的數(shù)值就可以靈活運用了。
想要實現(xiàn)CSS圓角漸變并匹配內(nèi)容背景圖可以參考以下代碼：
<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">邊框漸變色從內(nèi)邊框到邊框，背景圖像單獨設置不重復。</span>
</div>background-origin表示的是背景起始位置，其三個值如下，依次是
border-box 從邊框開始；
padding-box(默認) 從內(nèi)邊距開始；
content-box 從內(nèi)容開始。
background-origin: border-box | padding-box(默認) | content-box
background-clip表示的是背景填充位置，其四個值如下，依次是
border-box(默認) 填充至邊框；
padding-box 填充至內(nèi)邊距；
content-box 填充之內(nèi)容；
text 作為字體前景色。
background-clip: border-box(默認) | padding-box | content-box | text
background-size表示的是背景尺寸，其五個值如下，依次是
contain 將圖像擴大至適應最短的邊，剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊，圖像可能顯示不完整
length 兩個值依次設置圖像寬和高，未設置則為auto
percentage 兩個百分比依次設置圖像寬和高，未設置則為auto
auto 默認設置
角屬性border-radius屬性，一個比較簡單但用處很大的一個重要css3屬性，繪制圓形、圓角矩形 、橢圓形。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
