我们有时会遇到要用实现一个弧形,而这样的弧形要怎么实现呢?
用图片?好像不大现实,因为这样就要无故多加载一张图片了
,这里我们来说说怎么用css的after伪类来实现弧形。 如果想要调整弧度的话,可以通过高读来调整的;

<view class="bb"></view> .bb{
width: 100%;
height: 140px;
position: relative;
z-index: -1;
overflow: hidden;
} .bb::after {
content: '';
width: 120%;
height: 100px;
position: absolute;
left: -10%;
top: 0;
z-index: -1;
border-radius: 0 0 60% 60%;
background: #1496f1;
}

 <view class="aa"></view>

.aa{
width:100%;
height: 330rpx;
position: relative;
z-index: -1;
overflow: hidden;
} .aa::after{
content:'';
width: 100%;
height: 330rpx;
position: absolute; left: 0;
top:0;
z-index: -1;
border-radius: 0 0 50% 50%;
background: #1496F1;
}

css漂亮的弧形的更多相关文章

  1. CSS漂亮盒子(下)

    4.多重背景 CSS支持一个元素设置多个背景图片. 每个背景属性有相应的多值语法,多个值由逗号分隔. .multi-bg-shorthand { width: 300px; height: 200px ...

  2. CSS漂亮盒子(上)

    HTML文档中的所有元素都是由矩形盒子构成的--不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子. 1.背景颜色 设置页面背景颜色. body { background-color ...

  3. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. CSS之弧形阴影

    简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...

  5. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  6. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  7. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  8. 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码

    在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...

  9. 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  10. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

随机推荐

  1. Linux中tar文件压缩与解压

    文件压缩与解压缩 一般什么情况下使用文件压缩? 备份数据,数据传输 节省磁盘空间 减少带宽使用 减少负载 减少IO操作 什么情况下进行压缩比较合适? 错过业务高峰期,由于文件的压缩会瞬间加大cpu的负 ...

  2. JVM中的Hello World是如何运行的?

    每一个Java开发者都是通过Hello World敲开面向对象世界的大门.但是在一开始,我们考虑的只是这个语言是什么样的,我们如何更好的编码,却很少有人关心他内部是怎么运行的.看下面一个简单的hell ...

  3. Java 网页浏览器组件介绍

    王 凯迪, 软件工程师, Convergys 上海研发中心 简介: 使用 Java 开发客户端应用有时会需要使用到浏览器组件,本文将介绍在 Java 用户界面中使用浏览器的四种方法,并且比较它们各自的 ...

  4. 基于golang的swagger

    Swagger 相关的工具集会根据 OpenAPI 规范去生成各式各类的与接口相关联的内容,常见的流程是编写注解 =>调用生成库->生成标准描述文件 =>生成/导入到对应的 Swag ...

  5. 2023CCCC选拔赛

    7-7 与零交换 给定排列\(p:0,1,2...n-1\),每次操作你只能将一个数字和\(0\)进行交换,然后将初始排列升序排列,请你找出最少的与\(0\)交换的次数 题解:思维 + 环 样例一: ...

  6. C++ 实现万年历(原创)

    2020年08月31日 首次分享文档源代码. 2023年11月23日 对文档.代码进行了更新,希望可以帮助到你. 1. 实现功能 提供菜单方式选择,假定输入的年份在1940-2040年之间. 输入一个 ...

  7. windows 上部署 kafka 做测试

    1.下载 需要下载 zookeeper 和kafka 我下载的版本是 2.部署 2.1 部署 zookeeper 2.1.1 新建配置文件 zoo.cfg 内容为 tickTime = 2000 da ...

  8. elastic 7.15 集群搭建

    准备三台ES 7.15 关于系统配可以参考之前的文章. https://www.cnblogs.com/yg_zhang/p/10214196.html 这里写一下 的集群配置.这里和之前配置有所不同 ...

  9. ChatGPT在功能测试用例生成方面的优势

    功能测试是软件测试的非常重要的分类,所有软件系统都要保证功能的正确性,而测试用例则是功能测试的重中之重.测试用例的编写是测试人员必须认真面对的一件耗时费力.枯燥乏味的工作.如何才能快速高效地编写测试用 ...

  10. VMpwn总结

    前言: 好久没有更新博客了,关于vm的学习也是断断续续的,只见识了几道题目,但是还是想总结一下,所谓vmpwn就是把出栈,进栈,寄存器,bss段等单独申请一块空闲实现相关的功能,也就是说一些汇编命令通 ...