border-radius的参数
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}
.div
1
{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的参数的更多相关文章
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- javascript页面间传递参数
1.通过URL传递参数 传递参数页 function setCity() { var str = document.getElementById("cityName"); if ( ...
- loadrunner 脚本开发-参数化之将内容保存为参数、参数数组及参数值获取
转自:http://blog.sina.com.cn/s/blog_13cc013b50102v49c.html(查看原文) 在VuGen中默认使用{}的字符串称为参数 注意:参数必须在双引号中才能用 ...
- wxpython 窗口排版- proportion/flag/border参数说明
新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料.试验,总结如下. 1.需求实例 来个实例,窗口有3行控件 第一行是文本提示(大小不变,文字左对齐,控件居左). 第二行依次为文本提示 ...
- R: plot 绘图各种参数,以及 legend。。
################################################### 问题:基础绘图plot 18.4.30 plot函数,基础绘图的各个参数? 解决方案: ca ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- jquery/zepto 圣诞节雪花飞扬
下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3扩展技术
我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用. less技术相关语法 less相对来说比较简单,语法也较少: 变量的定义: @w:20px; ...
- Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图
1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...
随机推荐
- linux otl oracle数据库连接例子
#include <string> #include <iostream> using namespace std; #define OTL_ORA10G //我连的是LI ...
- [转] OracleDataReader.Read()是否有值
TongYu2009的原文地址 当你执行一次OracleDataReader.Read()是Bool型),注意是只读取一个!如果你的Select语句执行结果是空,或者所有的结果都已经读取完了则Orac ...
- export setenv
bash export LD_LIBRARY_PATH="../third_party/lib:$LD_LIBRARY_PATH" csh setenv LD_LIBRARY_PA ...
- 【剑指Offer面试题】 九度OJ1517:链表中倒数第k个结点
鲁棒性是指程序可以推断输入是否符合规范要求,并对不和要求的输入予以 合理的处理. 题目链接地址: http://ac.jobdu.com/problem.php?pid=1517 题目1517:链表中 ...
- NS3网络仿真(9): 构建以太网帧
快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 在NS3使用了一个叫Packet的类来表示一个数据帧,本节尝试用它构造一个以太网帧. 以下是一个典 ...
- [IT学习]阿铭Linux 微信公众号 每日一题 解析
1.shell习题171020公布的昨日答案 习题171019 - 打印正方形 #!/bin/bash read -p "please input a number:" sum a ...
- Javascript中的apply、call、bind
apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . ...
- Chapter1-data access reloaded:Entity Framework(下)
1.4 Delving deep into object/relational differences 深入挖掘对象关系的不同 理解面向对象和关系世界的不同是重要的,因为他会影响你设计一个对象模型或者 ...
- PyTorch 60 分钟入门教程:数据并行处理
可选择:数据并行处理(文末有完整代码下载) 作者:Sung Kim 和 Jenny Kang 在这个教程中,我们将学习如何用 DataParallel 来使用多 GPU. 通过 PyTorch 使用多 ...
- C项目实践--贪吃蛇(2)
12.按键处理 函数名称:key_down 函数功能:按键处理函数,主要包括:1.刚开始或结束时的按键处理,游戏开始时,按任意键进入游戏,游戏运行过程中按回车键是游戏的暂停或开始的切换键:2.游戏运行 ...