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. Python中lambda表达式的应用

    lambda表达式 Python中定义了一个匿名函数叫做lambda表达式,个人理解实现的作用就是代替一些简单的函数,使得代码看上去更简洁并且可读性高.举个例子,我们有一个元组列表[(‘a’,1),( ...

  2. TensorFlow图像处理函数

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 图像编码处理+图像大小调整+图像翻转+图像色彩调整+处理标注框 #!/usr/bin/env python # - ...

  3. the little schemer 笔记(5)

    第五章 “Oh My Gawd”:It's Full of Stars (rember* a l)是什么,其中a是cup,l是((coffee) cup ((tea) cup) rember*发音为r ...

  4. div 四周都有阴影的写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Github配置SSH连接

    安装git.exe,打开Git Bash 1.检查是否已经有SSH Key. $cd /.ssh 2.生成一个新的SSH. $ ssh-keygen -t rsa -C "email@git ...

  6. HDU2586(tarjanLCA板子)

    ; int T, n, m; int f[maxn], vis[maxn], dis[maxn], ans[maxn]; vector<P> vc[maxn]; vector<int ...

  7. 正则表达式exec方法的陷阱

    http://www.w3school.com.cn/jsref/jsref_exec_regexp.asp exec() 方法的功能非常强大,它是一个通用的方法,而且使用起来也比 test() 方法 ...

  8. webkit滤镜

    -webkit-filter: grayscale(1);/*灰度*/ -webkit-filter: sepia(1);/*褐色*/ -webkit-filter: saturate(1);/*饱和 ...

  9. CSS div 塌陷问题

    嵌套塌陷 上下塌陷 overflow:hidden;

  10. php多文件上传类(含示例)

    在网上看到一个比较好的多文件上传类,自己改良了下,顺便用js实现了多文件浏览,php文件上传原理都是相同的,多文件上传也只是进行了循环上传而已,当然你也可以使用swfupload进行多文件上传! &l ...