本文的学习要点如下：
&nbs p; • 圆 角 border-radius
•盒阴影 box -s hadow
•边界图片 border -i mage
1.圆角 border-radius
XM L/HT ML Code 复制内容到剪贴板
< div > border-radius 属性允许您为元素添加圆角边框！ </ div > div { width: 200px; h ei ght: 100px; padding:20px; border: 1px solid red ; border-radius : 25px; }
2.盒阴影 box-shadow
XML/HTML Code 复制内容到剪贴板
< div > </ div > div { width: 200px; height: 100px; background: red; /*x轴偏移量 y轴偏移量 模糊程度 阴影颜色*/ box-shadow: 10px 10px 5px # 000; }
3.边界图片 border-image
html部分
XML/HTML Code 复制内容到剪贴板
< p > < b > 注意: </ b > internet E xp lorer 不支持 border-image 属性。 </ p > < p > border-image 属性用于设置图片的边框。 </ p > < div id = "round" > 这里，图像平铺（重复）来填充该区域。 </ div > < br > < div id = "stretch" > 这里，图像被拉伸以填充该区域。 </ div > < p > 这是我们使用的图片素材： </ p > < img src = "images/border.png" />
css部分
CSS Code 复制内容到剪贴板
div { width : 250px ; padding : 10px 20px ; border : 15px solid translate; } @H_556_ 406 @#round { /*safari*/ /*图片 源 图片边界向内偏移量 图片的 宽 度 用于指定在边框外部 绘制 border-image-area 的量 样式*/ - webkit - border -image : url ( .. /images/ border .png) 30 30 round; /* opera */ -o- border -image : url (images/ border .png) 30 30 round; border -image : url (images/ border .png) 30 30 round; } #stretc h { -webk IT - border -image : url (images/ border .png) 30 30 stretch; -o- border -image : url (images/ border .png) 30 30 stretch; border -image : url (images/ border .png) 30 30 stretch; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3圆角边框和边界图片效果实例 全部内容，希望文章能够帮你解决 CSS3圆角边框和边界图片效果实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3圆角边框和边界图片效果实例的详细内容...