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. CI框架错误汇总

    2017年1月13日12:09:02 [1] A PHP Error was encounteredSeverity: NoticeMessage: Undefined variable: aticl ...

  2. 使用Ctex中遇到的一些问题

    一般下载好Ctex,我是使用Latex+dvi2pdf完成编译的,但是发现推荐的使用为:1)运行CCT & Latex命令生成两次dvi和ps文件 2)使用dvi2pdf编译dvi文件生成pd ...

  3. Educational Codeforces Round 19 B

    Description You are given sequence a1, a2, ..., an of integer numbers of length n. Your task is to f ...

  4. Codeforces Round #324 (Div. 2)

    CF的rating设置改了..人太多了,决定开小号打,果然是明智的选择! 水 A - Olesya and Rodion #include <bits/stdc++.h> using na ...

  5. hashTable 和 hashMap的区别

    HashMap是Hashtable的轻量级实现(非线程安全的实现),他们都完成了Map接口,HashMap把Hashtable的contains方法去掉了,改成containsvalue和contai ...

  6. POJ1150he Last Non-zero Digit(组合)

    链接 题意从尾部找第一个非0的数 这样就可以考虑下怎样会形成0  这个都知道 只有因子2和因子5相遇会形成0 那这样可以先把所有的2和5先抽出来,这样就保证了其它的数相乘就不会再出现0了 这样就可以转 ...

  7. 使用vbScript 链接SQLserver数据库和基础操作

    使用vbs链接SQLserver数据库 数据库的创建.设计使用 management studio完成 1.本地链接数据库 set oCon = server.createObject("a ...

  8. spark性能调优--jvm调优(转)

    一.问题切入 调用spark 程序的时候,在获取数据库连接的时候总是报  内存溢出 错误 (在ideal上运行的时候设置jvm参数 -Xms512m -Xmx1024m -XX:PermSize=51 ...

  9. SqlServer 2008 创建测试数据

    包含要点: 数据库的循环 . insert select 句式   . 随机数(rand()函数).绝对值(abs()函数) ) ) DECLARE @randomvalue float SET @s ...

  10. codevs 1219 骑士游历 1997年

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 设有一个n*m的棋盘(2≤n≤50,2≤m≤50),如下图,在棋盘上有一个中国象 ...