季同生

今天小编跟大家讲解下有关CSS3圆角边框和边界图片效果实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3圆角边框和边界图片效果实例 的相关资料，希望小伙伴们看了有所帮助。

本文的学习要点如下：

•圆角 border-radius•盒阴影 box-shadow•边界图片 border-image1.圆角 border-radius

XML/HTML Code复制内容到剪贴板 <div>border-radius属性允许您为元素添加圆角边框！</div> div{ width:200px; height:100px; padding:20px; border:1pxsolidred; border-radius:25px; }

2.盒阴影 box-shadow

XML/HTML Code复制内容到剪贴板 <div></div> div{ width:200px; height:100px; background:red; box-shadow:10px10px5px#000; }

3.边界图片 border-image

html部分

XML/HTML Code复制内容到剪贴板 <p><b>注意:</b>InternetExplorer不支持border-image属性。</p> <p>border-image属性用于设置图片的边框。</p> <divid="round">这里，图像平铺（重复）来填充该区域。</div> <br> <divid="stretch">这里，图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材：</p> <imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif

css部分

CSS Code复制内容到剪贴板 div{ width:250px; padding:10px20px; border:15pxsolidtranslate; } #round{ -webkit-border-image:url(../images/border.png)3030round; -o-border-image:url(../images/border.png)3030round; border-image:url(../images/border.png)3030round; } #stretch{ -webkit-border-image:url(../images/border.png)3030stretch; -o-border-image:url(../images/border.png)3030stretch; border-image:url(../images/border.png)3030stretch; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。

来源：爱蒂网