圆角边框CSS如何实现？

招生问答

联系我们

圆角边框CSS如何实现？

浏览次数：867 添加时间：2016/5/30 10:26:54

圆角边框可以用图片实现，也可以用 CSS 实现。如果用图片做的话，就画好圆角然后设置成背景图片。用 CSS 不需要图片，直接用代码定义颜色。用图片的话，会影响网页打开速度，当然如果图片不大，影响也并不明显。用 CSS 不会影响网页打开速度，但是实现方法略麻烦，要写不少代码。不好讲哪个更好哪个更差，用到各自适合的地方就行了。

这里介绍两种不用图片，直接用 CSS 实现圆角边框的方法。两种 CSS 方法原理类似，都是在一个层上加二个或更多层，不过这些层只有左右边线，上边线和下边线有背景色，都有一定的长度差距差，从而呈现出圆角边框的效果。

方法一： CSS 样式定义，放在网页前部。绿色字是注释，红色字是可自行更改的颜色编码。

引用以上定义的样式，在网页中显示圆角边框。绿色字是注释。

CSS 圆角边框，无图片实现方法

class="r3">

效果如图所示：
class="r4">
class="r3">

class="r2">

你还有什么方法？

友情提示：如果您正在为就业难而烦恼，如果您想跳槽转行而不知该如何决择，如果您因激烈的职业竞争而想充电学习，请点击在线客服，或者拨打咨询电话，我们会有专业的职业规划老师为您解除困惑！

【关闭窗口】