圆角效果 border-radius

 border-radius是向元素添加圆角边框。

使用方法:

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。

实心上半圆:

方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}

实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:

div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}

css3之圆角效果 border-radius的更多相关文章

  1. 实现IE下兼容CSS3的圆角效果

    有些CSS3的牛逼的效果在IE下展示不出来是最烦人的啦,在项目中做的圆角效果到了IE下一堆方块....忒尴尬了...,找了个替代解决方案 1.首先下载一个js插件PIE.js百度一搜都是的,我也就不写 ...

  2. CSS3实现圆角效果

    利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...

  3. CSS3边框 圆角效果 border-radius

    border-radius是向元素添加圆角边框 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 5px 5px ...

  4. css之outline实现圆角效果

    对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...

  5. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  6. CSS3属性之圆角效果——border-radius属性

    在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...

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

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

  8. css3帮你轻松实现圆角效果,不一样的前端页面。

    在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...

  9. 超简单CSS3实现圆角、阴影、透明效果

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

随机推荐

  1. HttpClient入门

    HttpClient入门 HttpClient 是 Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 H ...

  2. 在C#中对Datatable排序【DefaultView的Sort方法】

    在C#中对Datatable排序,[DefaultView的Sort方法] 代码如下: DataTable dt = new DataTable(); dt.Columns.Add("ID& ...

  3. CentOS学习笔记--时间

    时间 有装过Linux系统的人,可能都会有这样的经历,就是该机器安装windows系统时,时间正确,但是安装了linux系统后,尽管时区选择正确,也会发现系统时间不对.这是由于安装系统时采用了UTC, ...

  4. PHP XML笔记汇总

    一.XML Expat解析器 内建的Expat解析器使在PHP中处理XML文档成为可能. XML用于描述数据,其焦点是数据是什么.XML 文件描述了数据的结构. 在XML中,没有预定义的标签.您必须定 ...

  5. Cron和Spring定时任务

    1.Java Spring spring定时任务cronExpression的值(配置定时时间)格式说明: 一个cronExpression表达式有至少6个(也可能是7个)由空格分隔的时间元素.从左至 ...

  6. LogStash 中字段的排除和数据的排除

    排除字段 字段的排除需要在filter中进行操作,使用一个叫做 mutate 的工具,具体操作如下 由于这个工具的名字不是很容易联想到,也是找了好一会. //比如我们可能需要避免日志中kafka的一些 ...

  7. js数组的内部实现,迭代器,生成器和内包

    js内部实现 在js以外的很多语言中,数组将会隐式占用一段连续的内存空间.这种隐式的内部实现,使得高效的内存使用及高速的元素方法称为可能,而 在javascript中,数组实体是一个对象,所以通常的实 ...

  8. php 提示Warning: mysql_fetch_array() expects

    我的高度代码如下 include("conn.php"); if(!empty($_GET['id'])){         $sql="select * from ne ...

  9. MYSQL查询某字段中以逗号分隔的字符串的方法

    首先我们建立一张带有逗号分隔的字符串. CREATE TABLE test(id int(6) NOT NULL AUTO_INCREMENT,PRIMARY KEY (id),pname VARCH ...

  10. Pull解析xml

    没有写抛出的异常,例子是含有多个Person对象persons.xml(此片内容未写写入的代码),包含id,name,email,address标签,Person对象含有id,name,email,a ...