border-radius的参数:

据w3c上的官方解释,是这样子的:

border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四个值,length和%指的是值的单位。

border可以带四个参数分别设置四个边框(上左下右的顺序),同样的,border-radius也可以带四个参数,并且以顺时针的方向解析,上左,上右,下右,下左

两个参数的时候,是上左和下右,上右和下左,比如.div1{border-radius: 2em 1em}

三个参数的时候,是上左,上右和下左,下右,比如.div1{border-radius: 2em 1em 3em}

.div1{border-radius: 2em/1em}

那么以斜杠/分开后面的参数是怎么回事呢?是这样子的,第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,所以你现在就可以画一个左右不对称的圆角啦:

实例:通过border-radius做消息数量提示

<style>
.circel{
position: absolute;
background: #21841d;
color: #fff;
right:-5px;
top: -2px;
font-weight: normal;
line-height: 20px;
border-radius: 100%;
min-width: 20px;
height: 20px;
text-align: center;
font-size: 14px
}
</style> <a href="" style="position:relative">待办事项<span class='circel'>6</span></a>

  

border-radius的参数的更多相关文章

  1. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. javascript页面间传递参数

    1.通过URL传递参数 传递参数页 function setCity() { var str = document.getElementById("cityName"); if ( ...

  3. loadrunner 脚本开发-参数化之将内容保存为参数、参数数组及参数值获取

    转自:http://blog.sina.com.cn/s/blog_13cc013b50102v49c.html(查看原文) 在VuGen中默认使用{}的字符串称为参数 注意:参数必须在双引号中才能用 ...

  4. wxpython 窗口排版- proportion/flag/border参数说明

    新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料.试验,总结如下. 1.需求实例 来个实例,窗口有3行控件 第一行是文本提示(大小不变,文字左对齐,控件居左). 第二行依次为文本提示 ...

  5. R: plot 绘图各种参数,以及 legend。。

    ################################################### 问题:基础绘图plot   18.4.30 plot函数,基础绘图的各个参数? 解决方案: ca ...

  6. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  7. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  8. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. CSS3扩展技术

    我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用. less技术相关语法 less相对来说比较简单,语法也较少:     变量的定义:     @w:20px; ...

  10. Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

随机推荐

  1. linux otl oracle数据库连接例子

    #include <string> #include <iostream> using namespace std; #define OTL_ORA10G   //我连的是LI ...

  2. [转] OracleDataReader.Read()是否有值

    TongYu2009的原文地址 当你执行一次OracleDataReader.Read()是Bool型),注意是只读取一个!如果你的Select语句执行结果是空,或者所有的结果都已经读取完了则Orac ...

  3. export setenv

    bash export LD_LIBRARY_PATH="../third_party/lib:$LD_LIBRARY_PATH" csh setenv LD_LIBRARY_PA ...

  4. 【剑指Offer面试题】 九度OJ1517:链表中倒数第k个结点

    鲁棒性是指程序可以推断输入是否符合规范要求,并对不和要求的输入予以 合理的处理. 题目链接地址: http://ac.jobdu.com/problem.php?pid=1517 题目1517:链表中 ...

  5. NS3网络仿真(9): 构建以太网帧

    快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 在NS3使用了一个叫Packet的类来表示一个数据帧,本节尝试用它构造一个以太网帧. 以下是一个典 ...

  6. [IT学习]阿铭Linux 微信公众号 每日一题 解析

    1.shell习题171020公布的昨日答案 习题171019 - 打印正方形 #!/bin/bash read -p "please input a number:" sum a ...

  7. Javascript中的apply、call、bind

    apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . ...

  8. Chapter1-data access reloaded:Entity Framework(下)

    1.4 Delving deep into object/relational differences 深入挖掘对象关系的不同 理解面向对象和关系世界的不同是重要的,因为他会影响你设计一个对象模型或者 ...

  9. PyTorch 60 分钟入门教程:数据并行处理

    可选择:数据并行处理(文末有完整代码下载) 作者:Sung Kim 和 Jenny Kang 在这个教程中,我们将学习如何用 DataParallel 来使用多 GPU. 通过 PyTorch 使用多 ...

  10. C项目实践--贪吃蛇(2)

    12.按键处理 函数名称:key_down 函数功能:按键处理函数,主要包括:1.刚开始或结束时的按键处理,游戏开始时,按任意键进入游戏,游戏运行过程中按回车键是游戏的暂停或开始的切换键:2.游戏运行 ...