css漂亮的弧形
我们有时会遇到要用实现一个弧形,而这样的弧形要怎么实现呢?
用图片?好像不大现实,因为这样就要无故多加载一张图片了
,这里我们来说说怎么用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漂亮的弧形的更多相关文章
- CSS漂亮盒子(下)
4.多重背景 CSS支持一个元素设置多个背景图片. 每个背景属性有相应的多值语法,多个值由逗号分隔. .multi-bg-shorthand { width: 300px; height: 200px ...
- CSS漂亮盒子(上)
HTML文档中的所有元素都是由矩形盒子构成的--不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子. 1.背景颜色 设置页面背景颜色. body { background-color ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS之弧形阴影
简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码
在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...
- 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
随机推荐
- PHP无法连接MySQL8.0数据库问题处理 报错如下: SQLSTATE[HY000]
PHP无法连接MySQL8.0数据库问题处理报错如下:SQLSTATE[HY000] [2054] The server requested authentication method unknown ...
- Spring3.0核心组件的源码简单分析
前言 本文结合Spring3.0的源码进行简单的介绍,这里的核心组件不是我们常见所谓的IOC和AOP,而是以Spring3.0发布的开发包为切入点,当然Spring3.0以后的各个版本基本上差不多,思 ...
- OSG开发笔记(三十七):OSG基于windows平台msvc2017x64编译器官方稳定版本OSG3.4.1搭建环境并移植Demo
前言 自行编译的osg版本插件比较多,如果对版本没有特定要求,但是对环境编译器有特定要求,可以反向融合编译器符合要求的osg版本. OSG下载过程 osg官网:http://www.osg ...
- opencv imshow 大图片显示,拖动显示
用imshow显示大图片,不能完整显示,不方便.结合网友的代码,修改成现在的代码,可以拖动图片,方便查看完整图片.而且方便调试,只需要用MatShow替换imshow. struct MousePar ...
- C/C++源码扫描系列- Fortify 篇
首发于 https://xz.aliyun.com/t/9276 概述 Fortify是一款商业级的源码扫描工具,其工作原理和codeql类似,甚至一些规则编写的语法都很相似,其工作示意图如下: 首先 ...
- Winserver主副域控切换的方法
查看当前的dc netdom query dc 步骤 登录主域控(PDC),例如主域控的主机名为dc01.yourdomaincontroller.com (FQDN 格式) 打开CMD命令行终端, ...
- Postgresql使用触发器实现同步插入两张表
在有一个陈旧的系统的情况下,如果升级API可以优先使用微服务的形式,将数据库进行独立拆分,将原来的数据库原原本本地固定在旧系统中,然后在独立的微服务中运行与部署新系统. 如果原有的数据需要在更换结构的 ...
- 【MyBatis】学习笔记06:各种查询所返回数据的数据类型
[Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 [MyBatis]学习笔记03:配置文件进一步解读(非常重要) [MyBatis]学习笔记04:配 ...
- 在openEuler RISC-V上无痛部署Solidity
近几年区块链很火,随着各国政府对加密技术的监管政策不断变化和BTC的暴涨,越来越多人对这项去中心化的技术充满着期待.这次我用openEuler 24.09 RISC-V的远程机器尝试编译了Solidi ...
- 《HelloGitHub》第 105 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. github.com/521xueweihan/HelloG ...