怎么在CSS3中实现一个边框效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
我们提供的服务有：网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、即墨ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的即墨网站制作公司
什么是CSS#
CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或“级联样式表”，简称样式表。
CSS的主要作用#
它主要是用来给HTML网页来设置外观或样式。外观或样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片。
CSS3 边框
CSS3 边框#
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。
您将学到以下边框属性：border-radius、box-shadow、border-image。
一、圆角边框border-radius#
在 CSS3 中，border-radius 属性用于创建圆角：
1.1、border-radius语法#
基本写法如下：
设置左上角
border-top-left-radius:10px;
设置右上角
border-top-right-radius:10px;
设置左下角
border-bottom-left-radius:10px;
设置左下角
border-bottom-right-radius:10px;
简写设置四个角
执行顺序如下: 左上-右上-右下-左下
border-radius:1px 2px 3px 4px;
设置四角值统一
border-radius:10px;
支持百分比
border-radius:100%;
支持em
border-radius:2em;
支持运算
border-radius:30px/30px; /*支持加和除 其余的不支持*/
JavaScript语法
document.getElementsByTagName("div")[0].style.borderRadius = "25px";
1.2浏览器兼容性#
-webkit：代表Webkit枘核浏览器，如chrome and safari私有属性或内核识别码。
-webkit-border-radius:5px; -moz：代表Firefox浏览器私有属性或内核识别码。
-moz-border-radius:5px;
ms代表ie浏览器私有属性或内核识别码。
-ms-border-radius: 5px;
-o-代表欧朋opera浏览器私有属性或内核识别码。
-o-border-radius: 5px;
IE9+、Firefox 4+、Chrome、Safari 5+以及 Opera支持 border-radius 属性。
border-radius:10px;
看完上述内容，你们掌握怎么在CSS3中实现一个边框效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！