H5C3--圆角
/*添加圆角 规律：顺时针方向
一个值：代表四个方向
二个值：左上+右下 / 右上+左下
三个值：左上 / 右上+左下 / 右下
四个值：左上/ 右上 / 右下/ 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*border-radius: 50%;*/
/*border-radius: 0px 200px 0px 100%;*/ /*为单个角的不同方向分别设置圆角*/
/*border-top-right-radius: 50px 100px;
border-top-left-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;*/
/*border-top-right-radius: 50px;*/
/*border-radius: 50px/100px;*/
/*border-radius: 10px 20px 40px 80px/100px 40px 20px 10px;*/
其中，为每个角单独设置圆角：例如
border-top-right-radius : 50px 50px;
border-top-right-radius : 50px 100px;
一.一个值：代表四个方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border-radius: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二.二个值：左上+右下 / 右上+左下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border-radius: 25% 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三.三个值：左上 / 右上+左下 / 右下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border-radius: 10% 50% 80%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
四.四个值：左上/ 右上 / 右下/ 左下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border-radius: 10px 30px 60px 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
H5C3--圆角的更多相关文章
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- [BOT] 一种android中实现“圆角矩形”的方法
内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
- input标签中button在iPhone中圆角的问题
1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...
- winform 窗体圆角设计
网上看到的很多winform窗体圆角设计代码都比较累赘,这里分享一个少量代码就可以实现的圆角.主要运用了System.Drawing.Drawing2D. 效果图 代码如下. private void ...
- 自定义控件之 圆形 / 圆角 ImageView
一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的: 二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在 ...
- Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)
Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...
- android ImageView网络图片加载、动态设置尺寸、圆角..
封装了一个关于ImageView的辅助类,该类可以方便实现网络图片下载的同时,动态设置图片尺寸.圆角.....一系列连贯的操作,无样式表,java代码实现所有功能,使用很方便. package com ...
- CSS3 border-radius 圆角属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...
- android 自定义控件——（一）圆角按钮
----------------------------------矩形或圆角类型(源代码下有属性解释)------------------------------------------------ ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
随机推荐
- MapReduce的体系结构
- hdu5952 Counting Cliques 技巧dfs
题意:一个有N个点M条边的图,球其中由S个点构成的团的个数.一个团是一个完全子图. 没有什么好办法,只有暴力深搜,但是这里有一个神奇的操作:将无向图转为有向图:当两个点编号u<v时才有边u-&g ...
- 洛谷P3834【模板】可持久化线段树 1（主席树）
题目背景 这是个非常经典的主席树入门题--静态区间第K小 数据已经过加强,请使用主席树.同时请注意常数优化 题目描述 如题,给定N个正整数构成的序列,将对于指定的闭区间查询其区间内的第K小值. 输入输 ...
- Vim操作 -- 多段复位粘贴
Vim可以多段复制.粘贴.即,内容X复制到寄存器“1”,内容Y复制到寄存器“2”:粘贴时可以选择从“1”还是“2”粘贴. (1) Vim有13个粘贴板,分别是0.1.2.....9.a.“.+:用:r ...
- Ionic3 demo TallyBook 实例3
1.准备应用相关组件 echarts--直接 npm install 安装即可 2.home.ts import { Component,ViewChild,ElementRef } from '@a ...
- 微信小程序连续旋转动画this.animation.rotate
一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...
- Starting MySQL ** mysqld_safe Directory '/var/lib/mysql' for UNIX socket file don't exists
本地虚拟机(CentOS6.8)启动MySQL(MySQL5.6.35)服务失败 [root@VMUest ~]# service mysql status ERROR! MySQL is not r ...
- ElasticSearch入门之花落红尘（三）
上篇文章散仙介绍了ElasticSearch的入门安装和使用,那么本篇我们来看下,如何使用java api来和ElasticSearch进行交互,简单点说,就是实现一个增删改查,来找找入门的感觉. 在 ...
- CAS添加验证码功能
1. cas.war 下面的web-inf/web.xml lib添加 kaptcha.jar kaptcha.jar通过maven获取 <dependency> <group ...
- VS2017装了西红柿插件之后，启动很多次才能启动成功，进程有很多devenv.exe但是就是无法启动成功
VS2017装了西红柿插件之后,启动很多次才能启动成功,进程有很多devenv.exe但是就是无法启动成功,这个可能是西红柿插件visual assist的问题 启动vs命令行 输入: devenv ...