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;

說明：這個弧線其實是某一個組件（我這裏爲.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;
}

總結：

我這裏實現的是像上突出的弧線，其他方向的實現思路也一樣~