可以画个1/4之一的圆也可以画整个圆

<html>

<style type="text/css">

div{

    background-color: #000;

    width: 100px;

    height: 100px;

    border-radius: 50px;

    position: absolute;

}

#half{

    background-color: #fff;

    width: 50px;

    height: 50px;

    top: 1px;

    left: 1px;

    position: absolute;

    border-radius: 50px 0 0 0 ;

}

</style>

<body>

    <div>

        <div id="half"></div>

    </div>

</body>

</html>

效果：

也可以画个半圆

<html>

<style type="text/css">

body{

    background-color: #f00;

}

div{

    content: "";

    position: relative;

    left: 200px;

    width: 200px;

    height: 400px;

    border-radius: 0px 200px 200px 0px;

    background-color: #fff;

    display: block;

}

</style>

<body>

    <div></div>

</body>

</html>

div border-radius的更多相关文章

  1. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  2. css 对div用hover设置border，出现抖动和div走位问题，解决方法

    样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其 ...

  3. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  4. CSS + radius 五环

    使用CSS的外链方式,写了一个五环 CSS的布局 附加radius的使用 思路: 一个大盒子里放两个子盒子: 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环: 大盒子给相对定位,连个子盒子设为绝 ...

  5. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  6. CSS魔法堂：重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  7. 向 div 元素添加圆角边框：

    div { border:2px solid; border-radius:25px; }

  8. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  10. border opacity

    div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-cl ...

随机推荐

  1. mvc3.0ModelFirst生成实体

    前沿 这几天想用mvc写点东西,mvc现在自己工作也不用,所以有些生.于是弄点视频研究一下.可能一些经常接触mvc的对这个问题看来,就是小kiss,但是我感觉自己研究出来了还是比较兴奋.在3.0根据模 ...

  2. 移动web问题小结

    Meta标签: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab ...

  3. lamp环境－编译安装

    http://my.oschina.net/JerryBaby/blog/292731 http://blog.chinaunix.net/uid-20639775-id-154442.html ht ...

  4. 使用Yii框架中遇到的三个问题

    以下由我们在信易网络公司开发项目的时候终结出的一些经验 使用Yii框架中遇到的三个问题 1.main.php文件中欲引入全局变量的问题 还原一下此问题:在Yii框架中,main.php一般会作为整个应 ...

  5. c# winform 隐藏tabcontrol标签

    Apperarance 属性:Faltbuttons SizeMode属性:Fixed 各个TabPage的Text :空 ItemSize : Width=0;Height=1;

  6. poj 1144 Network

    Network 题意:输入n(n < 100)个点,不一定是连通图,问有多少个割点? 割点:删除某个点之后,图的联通分量增加. 思路:dfs利用时间戳dfs_clock的特性,点u的low函数l ...

  7. linux常用命令搜索

    解压tar - xzvf webcmp.tar.gz /目的目录 压缩tar - czvf webcmp.tar.gz /压缩源文件 发包命令 cd /cap/sc_bossdata_20140516 ...

  8. PHP练习题(一)

    程序1 .题目: 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10% : 利润高于10 万元, 低于20 万元时, 低于10万元的部分按10% 提成,高于 10万元的部分,可提 ...

  9. 李洪强漫谈iOS开发[C语言-029] - 关系运算符

  10. HTML input标签的checked属性与Razor解析

    在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了 ...