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__边框圆角的更多相关文章

  1. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  2. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  3. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  5. SilverLight:布局(1) Border(边框)对象、Grid(网格)对象

    ylbtech-SilverLight-Layout:布局(1) Border(边框)对象.Grid(网格)对象 A, Border(边框)对象 B, Grid(网格)对象 C, Grid(网格)对象 ...

  6. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

  7. CSS3 -- 边框圆角

    文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  9. border 外边框

    语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...

  10. css3实现边框圆角样式

      基本语法: border-radius: 5px; 兼容大多数浏览器: /*兼容Mozilla(Firefox, Flock等浏览器)*/ -moz-border-radius-topleft: ...

随机推荐

  1. 任务十七:零基础JavaScript编码(五)

    任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...

  2. C语言数组指针(指向数组的指针)

    注意:数组指针的定义,与指针数组的区别 转载:http://c.biancheng.net/cpp/biancheng/view/162.html 指向多维数组元素的指针变量 ① 指向数组元素的指针变 ...

  3. SQLite入门(二)读写二进制数据

    //读二进制数据的函数 BOOL OpenBinDataFile(BYTE **pBUf,UINT &len) {     if (pBUf == NULL)     {         re ...

  4. C#MD5笔记

    在这里简单记录一下md5加密的方式 代码如下,请自行封装: static void Main(string[] args) { "); Console.WriteLine(s); Conso ...

  5. Studying TCP's Congestion Window using NS

    Studying TCP's Congestion Window using NS How to obtain TCP's CWND value The most important value th ...

  6. 【NLP_Stanford课堂】语言模型2

    一.如何评价语言模型的好坏 标准:比起语法不通的.不太可能出现的句子,是否为“真实”或"比较可能出现的”句子分配更高的概率 过程:先在训练数据集上训练模型的参数,然后在测试数据集上测试模型的 ...

  7. oam系统安装,windows操作系统注册列表影响系统安装

    windows注册列表可能会影响到系统的安装,本次安装oam10g版本,安装后没有问题,但是在配置oam和weblogic portal单点登录时在weblogic portal中访问oid和oam的 ...

  8. canvas游戏和动画中的碰撞检测(2种简单方式)

    碰撞检测关键步骤 碰撞检测需要处理经历下面两个关键的步骤: 计算判断两个物体是否发生碰撞 发生碰撞后,两个物体的状态和动画效果的处理 计算碰撞 只要两个物体相互接触,它们就会发生碰撞. 矩形物体碰撞检 ...

  9. docker中自定ingress网络

    在某些时候,docker自动生成的ingress网络会与服务器上已经存在的网络产生冲突,这个时候,你需要自定义ingress. 在自定义前,你需要删除所有有端口发布的服务. 使用命令docker ne ...

  10. 软件架构的描述-Architecture Models

    Software architecture involves the high level structure of software system abstraction, by using dec ...