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

我就是我 2022-05-29 11:14 262阅读 0赞

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

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

首先，上效果：

![20180322171315146][]

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

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

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;
    }

总结：

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

2、不过这种效果最好UI出个图，直接使用，即简单高效又好看。

[http_www.w3school.com.cn_cssref_pr_border-radius.asp]: http://www.w3school.com.cn/cssref/pr_border-radius.asp
[20180322171315146]: /images/20220529/e7c81c61aece4a3c89595f4156fc2505.png