1.border-radius是向元素添加圆角边框。border-radius:10px; /* 所有角都使用半径为10px的圆角 */     border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

实心上半圆:

方法:把高度(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---圆角设置的更多相关文章

  1. 19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

    CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120 ...

  2. CSS3圆角

    使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

  3. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  4. IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...

  5. CSS3圆角详解

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  6. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

  7. CSS3圆角详解第一辑

    有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...

  8. CSS3圆角详解(border-radius)

    1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...

  9. CSS3 圆角属性 border-radius和-webkit-border-radius使用

    CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border ...

  10. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

随机推荐

  1. 园艺研究生中途自学Java,赶上校招终进美团,分享面试经验

    前言 最近,圈子里的很多小伙伴都在面试,有些小伙伴儿拿到不错的offer,今天给大家推荐的这位小伙伴拿到美团点评的校招offer,他将自己这次面试的经历写下来供大家参考,看看你能回答多少? 背景 上海 ...

  2. Oracle中dblink的创建与删除

    查询数据库中有哪些dblink连接 select * from dba_objects where object_type='DATABASE LINK'; 删除公有的EMIS_PRODUCTOIN连 ...

  3. 如何为github已有仓库添加协议。

    在github创建开源项目的时候,github会引导开发者添加一个开源协议,直接照着操作即可.但是如果一开始没有添加开源协议,后面要怎么添加呢? 百度无果.多方打听.总结如下步骤. 1.首先,进入你的 ...

  4. UML 图中类之间的关系:依赖,泛化,关联,聚合,组合,实现

    http://www.uml.org.cn/oobject/201211231.asp 1. 关联 一个类作为另外一个类的变量:在UML类图中,用实线连接有关联关系的对象所对应的类 2.聚合 表示整体 ...

  5. UltraEdit的免费激活方法

    本来前段时间用UE编辑器用的好好的,然后今天突然提示我使用到期,需要购买激活.一脸懵逼中,只好再次激活,谁知道按照原来的方法激活的时候一直提示您输入的许可证id或密码错误 请您检查注册邮件并且重试. ...

  6. 解决error while loading shared libraries

    ldd print shared library dependencies.可以查看哪些库没有找到. 这个进程启动失败,使用ldd命令可以发现是因为memcache库没有发现.把该so文件放入/lib ...

  7. linux查找命令(find)

    linux查找命令(find) 命令格式: find [目录] [选项] [选项的条件] 选项: -name:文件名称查找 -size:文件的大小来查找 -perm:文件的权限来查找 ①根据文件的名称 ...

  8. MAX458X多通道模拟切换开关(类似74HC4051)

  9. [转]Android 如何监听返回键,弹出一个退出对话框

    本文转自:http://blog.csdn.net/sunnyfans/article/details/8094349 Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用 ...

  10. Thymeleaf 总结

    在javaScript中使用表达式 var list = /*[[${list}]]*/ null;   <script th:inline="javascript"> ...