h5-圆角的使用-案例安卓机器人
1.圆角的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
border: 1px solid red;
background-color: red;
/*添加圆角*/
/*border-radius:10px; 一个值是四个角都一样*/
/*border-radius:10px 30px;
第一个值左上 右下 第二个值右上 左下*/
/*border-radius:10px 30px 60px;
第一个值是左上 第二个值是右上 和左下 第三个值是右下*/
/*border-radius:10px 30px 60px 80px;
遵循左上 右上 右下 左下的顺序*/ /*添加椭圆*/
/*border-radius:100px/50px
添加/是用来设置当前不同方向的半径
水平方向x轴/垂直方向y轴
*/
border-radius:100px/50px; /*添加某个角的圆角*/
/*border-top-left-radius: 10px;*/ /*设置某个角的不同方向上的不同圆角值*/
/*border-top-left-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;*/ /*若果四个角的不同方向上的不同圆角值
分别是
水平方向的：左上 右上 右下 左下/垂直方向：左上 右上 右下 左下
*/
border-radius: 100px 80px 70px 60px/20px 50px 80px 90px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.安卓机器人小案例：结合伪元素实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
height: 0;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 50px auto;
}
.an_header{
width: 250px;
height: 125px;
background-color: green;
margin: 10px auto;
border-radius: 125px 125px 0 0;
position: relative;
}
.an_header::before,.an_header::after{
content: "";
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
position: absolute;
bottom: 40px;
}
.an_header::before{
left: 70px;
}
.an_header::after{
right: 70px;
}
.an_body{
width: 250px;
height: 250px;
background-color: green;
border-radius: 0 0 20px 20px;
margin: 0px auto;
position: relative;
}
.an_body::before,
.an_body::after{
content: "";
width: 30px;
height: 180px;
position: absolute;
background-color: green;
top: 30px;
border-radius: 10px;
}
.an_body::before{
left: -40px;
}
.an_body::after{
right: -40px;
}
.an_footer{
width: 250px;
height: 100px;
margin: 0px auto;
position: relative;
}
.an_footer::before,
.an_footer::after{
content: "";
width: 30px;
height: 90px;
position: absolute;
background-color: green;
top: 0px;
border-radius: 0 0 10px 10px;
}
.an_footer::before{
left: 50px;
}
.an_footer::after{
right: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
</html>
效果图：
h5-圆角的使用-案例安卓机器人的更多相关文章
- MFC简单绘制安卓机器人
原始日期:2014-03-29 20:35 众所周知,google的安卓机器人形象十分经典,包括眼睛的位置,胳膊以及天线的位置都是有固定位置和比例的,而且是最恰当的,看起来最美.而微软基础类库MFC绘 ...
- H5外包团队 2019案例更新
H5外包团队 2019案例更新 本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企 ...
- H5页面中判断是安卓手机还是ios手机的方法；APP页面中嵌套的H5跳转到APP其他页面的方法。
(一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...
- H5移动端项目案例、web手机微商城实战开发
自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...
- Android中使用Canvas和Paint绘制一个安卓机器人
场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
- h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例
html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...
- css3 特效拓展 画个安卓机器人
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 将h5用HBuilderX打包成安卓app后，document.documentElement.scrollTop的值始终为0或者document.body.scrollTop始终为0
let time = setInterval(() => { let scroll = document.documentElement.scrollTop || document.body.s ...
- 【Android】我有放入Icon到mipmap，但不显示，只显示安卓机器人Icon（Android 8.0 图标适配）
首先,放上别人写的博客,而我自己的博客,只会写大概思路,给自己留给备忘 https://blog.csdn.net/guolin_blog/article/details/79417483 其实会发生 ...
随机推荐
- UVA - 225 Golygons (黄金图形)（回溯）
题意:平面有k个障碍点.从(0,0)出发,第一次走1个单位,……,第n次走n个单位,恰好回到(0,0),每次必须转弯90°,图形可以自交,但不能经过障碍点.按字典序输出所有移动序列,并输出序列总数. ...
- 百度杀毒停止下载，个人PC杀毒软件真的走到尽头了吗？
在时代浪潮的席卷下,不适应的服务和产品终将被淘汰.诺基亚如此,杀毒软件亦是如此.就在近日,久久沉寂的杀毒软件市场被投下一颗重磅炸弹--百度杀毒软件官网PC端不再提供下载,但手机端依然提供下载和杀毒服务 ...
- redis报错MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist
解决方法:通过redis-cli连接到服务器后执行以下命令: config set stop-writes-on-bgsave-error no 注意:这种方法只是忽略了问题,并没有解决问题,具体问题 ...
- django-ckeditor使用
django-ckeditor 1 安装 pip install ckeditor 2 配置 INSTALLED_APPS中添加 'ckeditor', 修改写入字段的格式 主题相关配置(settin ...
- Machine Learning Note Phase 1（ Done！）
Machine Learning 这是第一份机器学习笔记,创建于2019年7月26日,完成于2019年8月2日. 该笔记包括如下部分: 引言(Introduction) 单变量线性回归(Linear ...
- eclipse中svn重新设置账户
查看svn版本:windows > preference > Team > SVN 1.如果svn插件是svnkit版 只需找到.keyring文件,一般目录是:eclipse安装目 ...
- jQuery原理系列-Dom Ready
ready事件是jquery的一个很重要的功能,在很久很久以前,我们是使用window.onload监听页面加载成功的,onload事件的好处是你不用考虑浏览器兼容性,也不需要依赖任何框架就可以写,但 ...
- Ubuntu 14.04 安装 Dash to Dock
每次打开或选择一个已经打开的应用都要把鼠标指到左上角,相当费事. Ubuntu 14.04 GNOME自带 Tweaks (系统中名为:优化工具),可以使界面如Windows般(最小化.最大化.底部任 ...
- Unity UGUI优化整理
看了不少UI优化方面的东西,还是记下来方便记忆,优化性能往往是在各种选择之间做出平衡(空间换时间,或者GPU换CPU,舍弃精度等). 主要优化点在减少Drawcall,减少Overdraw. Mask ...
- django下载
pip install django ==2.0.5 创建目录 1创建目录 2终端下进入目录 3输入django-admin startproject project