border-radius__边框圆角
1、四个参数:
border-radius: 值1 值2 值3 值4;顺序:从左开始,顺时针顺
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 10px 20px 30px 40px;
}
2、两个参数:
border-radius: 值1 值2; 顺序:上左下右,上右下左
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 200px 200px 0 0;
}
3、半圆的形成
border-radius: 200px 200px 0 0;向上的半圆 高度要减半
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 200px 200px 0 0;
}

注:border-radius: 0 0 200px 200px ;向下的半圆 高度要减半

border-radius__边框圆角的更多相关文章
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- SilverLight:布局(1) Border(边框)对象、Grid(网格)对象
ylbtech-SilverLight-Layout:布局(1) Border(边框)对象.Grid(网格)对象 A, Border(边框)对象 B, Grid(网格)对象 C, Grid(网格)对象 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- CSS3 -- 边框圆角
文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- border 外边框
语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...
- css3实现边框圆角样式
基本语法: border-radius: 5px; 兼容大多数浏览器: /*兼容Mozilla(Firefox, Flock等浏览器)*/ -moz-border-radius-topleft: ...
随机推荐
- Android学习——自定义控件(二)
这篇文章来介绍自定义组合控件,自定义组合控件的应用场景很多,比如当你的UI如下时: 倘若不使用组合控件,则需要在XML文件中声明4个TextView和4个EditText,而使用了组合控件,则只需要四 ...
- layui分页
毕业已经两年,期间经历了很多.一个人欢笑与哭泣,在墙角.在路边.在床上.每天搭乘首班车来到公司,每天无数次反省自己,每天每天再问自己为什么活着. 一.下载并引用css和js 地址:点我 <lin ...
- css零星进阶知识点
display: inline-block: 可设置宽高的行级元素,如果inline-block元素本行无法显示完全的话则整个换行而不是里面的单词换行 position: 设置参照物,top,left ...
- C# 使用 Invoke 实现函数的白盒 UT 测试
公有方法可以直接调用,但是一些非公开的方法,在覆盖率测试的时候也需要覆盖,可以使用 Invoke 来调用. 调用方法如下,其中 this 可以改为被调用的方法所属的类名,通过 BindingFlags ...
- 【Leetcode】【Medium】Remove Duplicates from Sorted Array II
Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...
- Mysql学习---全国省市区以及邮编数据库
更多下载
- [原]Linux 命令行 发送邮件
1.mail -s hi xx@yy.com 给xx@yy.com发一封主题为hi的信(没有正文) 编辑完内容后Ctrl-D结束. 2.echo "This is a test mail!& ...
- mysql 修改已存在的表增加ID属性为auto_increment自动增长
今天有需要将已经存在表设置自动增长属性 具体如下 alter table customers change id id int not null auto_increment primary key; ...
- [转] Java 命名规范
定义规范的目的是为了使项目的代码样式统一,使程序有良好的可读性. 包的命名 (全部小写,由域名定义) Java包的名字都是由小写单词组成.但是由于Java面向对象编程的特性,每一名Java程序员都 ...
- 六种排序算法的JavaScript实现以及总结
最近几天在系统的复习排序算法,之前都没有系统性的学习过,也没有留下过什么笔记,所以很快就忘了,这次好好地学习一下. 首先说明为了减少限制,以下代码通通运行于Node V8引擎而非浏览器,源码在我的Gi ...