border-radius的一种经典使用(上凸边框）

对于border-radius，大家应该都很熟悉->为元素添加圆边框。所以，此处不在讲解border-radius的语法，不懂的戳这里，http://www.w3school.com.cn/cssref/pr_border-radius.asp w3cschool讲的很详细~

 

下面我就利用border-radius添加圆边框这个功能实现以下效果-》向上凸出的弧线（红色线）-》此效果利用border-radius和定位就轻松解决，但第一次接触的话还需要花费点时间，所以我在这里顺便把它整理出来。

 

 

首先，上效果：

 

 

上述效果中红色弧线实现的思路：

第一、确定自己想要实现的效果-》弧线朝上？下？左？右？凸出-》我这里是弧线向上凸出，所以把上边框给出，即：

border-top: 2rpx solid red;</