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