CSS3是最新版本的CSS，学习后可以更好的用于工作及自己修改自己代码的各种样式。

border-radius圆角方法画实心圆。相当于在长方形（正方形）上画半径为边长一半的圆弧。

效果如上图，代码如下：

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>border-radius</title>

     <style type="text/css">

         body{text-align: center;margin:0; padding:0;}

         div.head{width:450px;margin: 0 auto;background: #8f8f8f;line-height: 100px;}

         div.content{width:600px;margin: 0 auto;vertical-align: middle;}

         .left-block{float:left;width:50%;background:#9a99ff;height: 100px;line-height: 100px;}

         .right-block{float:right;width:50%;background: #0000cc;height: 100px;line-height: 50px;}

         /*实心圆*/

         div.circle{

             height:100px;/*与width设置一致*/

             width:100px;

             background:#9da;

             border-radius:50px;

             margin:0 auto;

         }

         /*左半心圆*/

         div.left-circle{

             height:100px;

             width:50px;

             background:#9da;

             border-radius:50px 0 0 50px;

             margin-left: 50px;

             float: left;

         }

         /*右半心圆*/

         div.right-circle{

             height:100px;

             width:50px;

             background:#9da;

             border-radius:0 50px 50px 0;

             margin-left: 100px;

             float: left;

         }

         /*上半心圆*/

         div.top-circle{

             height:50px;

             width:100px;

             background:#9da;

             border-radius:50px 50px 0 0;

             margin-left: 50px;

             float: left;

         }

         /*下半心圆*/

         div.bottom-circle{

             height:50px;

             width:100px;

             background:#9da;

             border-radius:0 0 50px 50px;

             margin-left: 150px;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="head">

     <div class="circle">实心圆</div>

 </div>

 <div class="content">

     <div class="left-block">

     <div class="left-circle">左半圆</div>

     <div class="right-circle">右半圆</div>

     </div>

     <div class="right-block">

     <div class="top-circle">上半圆</div>

     <div class="bottom-circle">下半圆</div>

     </div>

 </div>

 </body>

 </html>

学习CSS3之实心圆的更多相关文章

  1. html、css如何画实心圆

    css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }

  2. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  3. android shap画圆（空心圆、实心圆）

    实心圆: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" ...

  4. css3 如何实现圆边框的渐变

    使用 css 实现下面效果: 把效果分解. 代码一: <style> .helper1 { height: 40px; padding: 15px; background: -webkit ...

  5. 跟我学习css3之transition

    HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...

  6. 用CSS3.0画圆

    CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或 ...

  7. 学习 | css3基本动画之demo篇

    移动端使用的框架是zepto,但是zepto的内置对象没有传统的animate这个方法,效果都是需要css3来实现的,zepto也不支持fadeIn和fadeOut等一些基本的动画,基于这一现状,我自 ...

  8. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  9. 。。。学习CSS3的第一个属性border-radius。。。

    学习border-radius,感觉这个文档写的很不错: http://blog.sina.com.cn/s/blog_61671b520101gelr.html

随机推荐

  1. java中面试可能会问的问题

    为了明年的面试,把面试中可能遇到的关于java的问题记录在下面,纯个人理解,如果有误,请指正! 1.java中拷贝的三种方式,以及他们的区别. 这三种方式分别是:直接赋值,浅拷贝,深拷贝.第一种直接赋 ...

  2. Unity5 打assetbundle时，无法打成图集仍然是散图的原因

    首先需要把 SpritePacker设置成可用 菜单Edit->project setting->editor      修改为可用 然后,保证所有图片的导入格式如下 最主要是 packi ...

  3. python爬虫入门（一）urllib和urllib2

    爬虫简介  什么是爬虫? 爬虫:就是抓取网页数据的程序. HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的 ...

  4. Java （六、String类和StringBuffer）

    Java String 类 字符串广泛应用 在Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 创建字符串 // ==比较的是字符串在栈中存放的 ...

  5. 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 使用FairyGUI (二)

    上次讲解了FairyGUI的最简单的热更新办法,并对其中一个Demo进行了修改并做成了热更新的方式. 这次我们来一个更加复杂一些的情况:Emoji. FairyGUI的   Example 04 - ...

  6. unity3d学习路线

    自学游戏开发难不难?小编在这里告诉你:你首先要做的是选择一门开发语言,包括Basic,Pascal,C,C++,等等.也经常会有人争论对于初学者哪门语言更好.对于这一系列流行语言的讨论,我的建议是以C ...

  7. sqlserver聚合索引(clustered index) / 非聚合索引(nonclustered index)的理解

    1. 什么是聚合索引(clustered index) / 什么是非聚合索引(nonclustered index)? 可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索 ...

  8. Rest接口和Thymeleaf的两个坑

    spring boot thymeleaf 热部署 在使用spring boot 开发的时候,使用了Thymeleaf 作为前端的模板开发,发现在调试过程中,改动了Thymeleaf模板后,需要重新启 ...

  9. 详解Linux文档属性、拥有者、群组、权限、差异

    写在前面 我们都知道Linux是一个支持多用户.多任务的系统,这也是它最优秀的特性,即可能同时有很多人都在系统上进行工作,所以千万不要强制关机,同时,为了保护每个人的隐私和工作环境,针对某一个文档(文 ...

  10. 用Visual Studio Code Debug世界上最好的语言(Mac篇)

    用Visual Studio Code Debug世界上最好的语言(Mac篇) 首先,你要有台Macbook Pro,接着才继续看这个教程. PS:Windows用户看这里用Visual Studio ...