整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
使用border-image可以設置漸變色邊框，但是當它與border-radius組合使用時，兩者卻無法兼容。
因此，實現這個效果的另一個思路是：利用兩個圓角矩形的面積差形成邊框。故可以使用以下方法實現：
使用嵌套的兩個div，并設置父元素的內邊距padding以此制造面積差，從而形成邊框的效果。
HTML
復制代碼
<div class="border-box"> <div class="border-content"></div></div>CSS
復制代碼
.border-box{ width: 200px; background:linear-gradient(0deg,#00135A,#01A1FF); border-radius: 5px; padding: 2px;/* 邊框寬度 */}.border-content{ width: 200px; height: 100px; border-radius: 5px; background-color: white; }使用偽元素充當背景也同樣可以達到上述效果，注意設置z-index將偽元素置于內容之下
HTML
復制代碼
<div class="border-content"></div>CSS
復制代碼
.border-content{ width: 200px; height: 100px; border-radius: 5px; position: relative; background-color: white; }.border-content::before{ content: ''; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框寬度 */ border-radius: 5px; background: linear-gradient(0deg,#00135A,#01A1FF); z-index: -1;/* 置于內容之下 */ }給一個div設置兩個不同大小的背景，從而利用兩個背景制造面積差，也可以實現上述效果。
使用background-image屬性設置兩組顏色，一組是內容顏色，另一組是border邊框顏色，用逗號隔開。
可以使用background-clip 屬性，該屬性規定了背景的繪制區域。給一組設置為padding-box（背景繪制區域從內邊距框開始），第二組為border-box（背景繪制區域延伸至邊框）。
此時的效果如下：
可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點都是padding-box。
使用background-origin屬性，該屬性規定了背景的繪制區域相對于什么位置來定位。給一組設置為padding-box（背景繪制區域以 padding 區域為參考），第二組為border-box（背景繪制區域以 border 區域為參考）。
此時即可得到想要的效果，代碼如下：
HTML
復制代碼
<div class="border-content"></div>CSS
復制代碼
.border-content{ width: 200px; height: 100px; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}該思路無法實現透明底的漸變色圓角邊框。
PC端進行網頁制作時，經常使用固定像素并且內容居中的網頁布局，為了適應小屏幕的設備，在移動設備和跨平臺(響應式)網頁開發過程中，多數使用流式布局，下面我們就對流式布局進行詳細介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度，也稱百分比自適應的布局。 流式布局實現方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標元素寬度/父盒子寬度=百分數寬度 下面通過一個案例來演示固定布局如何轉換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉換為百分比布局</title>
<style type="text/css">
body>*{ width: 980px; height:auto; margin:0 auto;
margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height: 300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>
打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。
可以嘗試改變瀏覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。
下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:
<style type="text/css">
body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding :5px; }
header{ height:50px; }
section{ height: 300px; }
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left; }
aside{ width:25.510204%; /*250÷980*/}
article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
</style>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
