本文的学习要点如下：
•圆角 border-radius
•盒阴影 box-shadow
•边界图片 border-image
1.圆角 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; /*x轴偏移量y轴偏移量模糊程度阴影颜色*/ 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="images/border.png"/>
css部分
CSS Code复制内容到剪贴板 div{ width:250px; padding:10px20px; border:15pxsolidtranslate; } #round{ /*safari*/ /*图片源图片边界向内偏移量图片的宽度用于指定在边框外部绘制border-image-area的量样式*/ -webkit-border-image:url(../images/border.png)3030round; /*opera*/ -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; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【CSS3圆角边框和边界图片效果实例】相关文章：
★ CSS圆角技术