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

总结：

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

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

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

三种经典iPhone上网络抓包方法详解
很多时候需要网络抓包分析,在iPhone上抓包稍有不同,下面介绍三种常用的方式.分析工具以wireshark为例. 一.最简单的方式:用PC作为热点,在PC上抓包优点:简单: 缺点:不能抓真机2G/ ...
3分钟快速实现：9种经典排序算法的可视化
作者 | 爱笑的眼睛来源 | 恋习Python(ID:sldata2017) 最近在某网站上看到一个视频,是关于排序算法的可视化的,看着挺有意思的,也特别喜感. ▼ 6分钟演示15种排序算法不知道 ...
深度学习100问：图像语义分割有哪些经典的上采样方法？
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达大家都知道目前主流的语义分割模型都是编码-解码框架的.通过编码器不 ...
统计学派的18种经典「数据分析方法」
来源:机器学习算法与Python实战本文约10000字,建议阅读15分钟本文为你列举了统计学派中18种经典的数据分析法. Part1 描述统计描述统计是通过图表或数学方法,对数据资料进行整理.分 ...
3min利用Python实现9种经典排序算法可视化!（附源代码）
来源:恋习Python 本文附视频,建议收藏. 本文为你分享实现9种经典排序算法可视化的方法,3分钟即可实现. [导读]近在某网站上看到一个视频,是关于排序算法的可视化的,看着挺有意思的,也特别喜感 ...
python用tsne降维_哈工大硕士实现了 11 种经典数据降维算法，源代码库已开放
网上关于各种降维算法的资料参差不齐,同时大部分不提供源代码.这里有个 GitHub 项目整理了使用 Python 实现了 11 种经典的数据抽取(数据降维)算法,包括:PCA.LDA.MDS.LLE. ...
CNN的几种经典模型
本文主要介绍一下CNN的几种经典模型比较.之前自己也用过AlexNet和GoogleNet,网络上关于各种模型的介绍更是形形色色,自己就想着整理一下,以备自己以后查阅方便 LeNet5 先放一张图,我 ...
std中稳定排序算法_源代码库已开放 | 哈工大硕士生用 Python 实现了 11 种经典数据降维算法...
转自:AI开发者网上关于各种降维算法的资料参差不齐,同时大部分不提供源代码.这里有个 GitHub 项目整理了使用 Python 实现了 11 种经典的数据抽取(数据降维)算法,包括:PCA.LDA ...
23种经典设计模式都有哪些，如何分类？Java设计模式相关面试
23种经典设计模式都有哪些,如何分类? 23种经典设计模式都有哪些,如何分类? java常用的设计模式?说明工厂模式 Java 中的23 种设计模式: Factory(工厂模式), Builder(建 ...

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

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

最新文章

热门文章