对于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;
}
总结:
1、我这里实现的是向上突出的弧线,其他方向的实现思路也一样~
2、不过这种效果最好UI出个图,直接使用,即简单高效又好看。