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

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

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

首先，上效果：

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

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

扫描二维码关注公众号，回复： 1949520 查看本文章

border-top: 2rpx solid red;

说明：这个弧线其实是某一个组件（我这里为.arc）的边~

第二、把该弧线（确切说类名为arc的这个view）定位到所需要展示弧线的地方（我这里为.head这个view）。ok,至此结束~

源码：

wxml代码

<view>

<!--头部  -->
    <view class="head">
        <text class="tit">这儿随便来一段文字->当当网（www.dangdang.com）是全球知名的综合性网上购物商城，由国内著名出版机构科文公司、美国老虎基金、美国IDG集团、卢森堡剑桥集团、亚洲创业投资基金（原名软银中国创业基金）共同投资成立。</text>
    </view>
    <!--弧线区域  -->
    <view class="arc"></view>
    <!--正文区域  -->
    <view class="conts">
        <text class="title">Welcome to 当当~</text>
        <image src="../../images/dd.jpg"></image> 
        <text class="titles">除图书以外，母婴、美妆、服装、家居家纺是当当着力发展的四大目标品类，其中当当婴童已经是中国最大线上商店，美妆则是中国排名前五的线上店。</text>
    </view>

</view>

wxss代码

/*头部  */
.head{
  height: 400rpx;
  background-color: gainsboro;
}
.tit{
 font-size: 30rpx;
 line-height: 80rpx;
}

/*弧线区域  */
.arc{
  height: 80rpx;
  border-top: 2rpx solid red;
  background-color: white; 
  border-radius: 80%;
  position: relative;
  top: -34rpx;
}

/*内容区域  */
.conts{
  height: auto;
  text-align: center;
}
.title{
  display: inline-block;
  font-weight: bold;
}
image{
  margin-top: 40rpx;
  width: 500rpx;
  height: 300rpx;
}
.titles{
  text-indent: 50rpx;
  display: inline-block;
  width: 680rpx;
  margin: 0 auto;
  font-size: 28rpx;
  line-height: 80rpx;
  border: 2rpx solid gainsboro;
  border-radius: 12rpx;
}

总结：

我这里实现的是像上突出的弧线，其他方向的实现思路也一样~

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

猜你喜欢