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. python 小词云

    # Author:Alex.wang# Date:2017.06.02# Version:3.6.0 import matplotlib.pyplot as pltfrom wordcloud imp ...

  2. 关于单一网络适配器拓扑TMG

    单网络适配器拓扑的功能 在单网络适配器拓扑中可以实现有限的 Forefront TMG 功能,其中包括: 针对 HTTP.HTTPS 和 CERN 代理 FTP 的正向 (CERN) 代理(仅限下载) ...

  3. $.on()方法和addEventListener改变this指向

    jQuery $.on()方法和addEventListener改变this指向 标签(空格分隔): jQuery JavaScript jQuery $.on() jq的绑定事件使用$([selec ...

  4. LINUX系统文件类型分类

    使用LINUX过程中,时常会对文件进行操作.但是linux中文件究竟有哪些分类呢?今天让我们大家来总结一下吧! 概述: linux文件可以分为五种类型,分别为:普通文件.目录.字符设备或块设备.套接口 ...

  5. 正则表达式 (python)

    正则表达式 在正则表达式中,如果直接给出字符,就是精确匹配. 用\d可以匹配一个数字,\w可以匹配一个字母或数字,所以: '00\d'可以匹配'007',但无法匹配'00A': '\d\d\d'可以匹 ...

  6. ptyhon class定制方法

      __iter__ 如果一个类想被用于for ... in循环.须实现一个__iter__()方法,该方法返回一个迭代对象,然后,Python的for循环就会不断调用该迭代对象的__next__() ...

  7. Linux:301重定向 —— 将不带www的重定向到带www的

    仓鼠又要手把手教啦 1.先看看自己有没有解析域名(带www和不带www的是两种域名形式!!) 位置:阿里云->域名->解析 2.进入解析,带www的说明你已经解析了www.ljjpm.co ...

  8. 云来储存型XSS漏洞+越权修改应用封面

    0x001. 今天本来想看看场景应用有什么新功能没,于是乎随便打开了一个场景应用,然后上传了一张图片修改下封面,结果我看到firefox 网络竟然有2个post,不由得勾起我的好奇心,好奇害死猫嘿嘿. ...

  9. Vue-Resource请求PHP数据失败的原因

    在写一个Vue项目的时候发现在使用Vue-Resource的post方法请求PHP数据时,完全没有反应,查阅资料才知道没有加配置参数: { emulateJSON:true } 这个配置参数的意思是: ...

  10. HDU 5677 ztr loves substring(Manacher+dp+二进制分解)

    题目链接:HDU 5677 ztr loves substring 题意:有n个字符串,任选k个回文子串,问其长度之和能否等于L. 题解:用manacher算法求出所有回文子串的长度,并记录各长度回文 ...