整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
使用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小时内与您取得联系。
