可以画个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. jQuery学习 day01

    最近受某大牛指点(我不会说他姓范),了解了一下jQuery,据说很牛X,就了解了一下,第一天,分享给大家一些心得吧. 1.首先就是导入jQuery文件了,这里我是去jQuery官网下载的.(大家可以去 ...

  2. Axure草记

    页面控件和DataSet绑定,DataSet和输入控件绑定(通过临时变量) 双击Repeater进入之后,你会发现下面已经默认添加了3行,这代表着,每增加一行将会重复3遍: Repeater可以只是部 ...

  3. JDK神坑：JAVA中Calendar的月份Month少1

    很多朋友在使初次使用Calendar时,会发现月份莫名其妙对不上,显示的结果总是比预期中小1个月,检查好几遍也没发现程序有错,于是开始抓狂.其实这个时候,只要去看JDK就会明白问题所在.JDK告诉我们 ...

  4. 《无懈可击的Web设计》_灵活的文字

    常见的方法 body{ font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后, ...

  5. Discuz帖子列表页无法ajax加载下一页问题

    上周末抽空重构了一下JX3PVE的PVE栏目,只上线了宏库栏目,结果出了一堆Bug.奈何公司这段时间都在搞完美假期这专题,太忙也没去处理.这不是周末拿时间来看一下. 发现其中有一个是点“下一页”aja ...

  6. JNI/NDK开发指南（二）——JVM查找java native方法的规则

    通过第一篇文章,大家明白了调用native方法之前,首先要调用System.loadLibrary接口加载一个实现了native方法的动态库才能正常访问,否则就会抛出java.lang.Unsatis ...

  7. 模拟google分页效果

    /// </summary> /// <param name="total">总记录数</param> /// <param name=& ...

  8. Entity Framework关联实体的三种加载方法

    推荐文章 EF性能之关联加载 总结很好 一:介绍三种加载方式 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和熊掌 ...

  9. linux 监控

    http://www.iyunv.com/thread-50606-1-1.html http://segmentfault.com/a/1190000002537665 http://blog.cs ...

  10. 单位有b\B\K\M\G的相互转换

    计算机存储计量单位 1． 计算机最小存储计量单位是:BIT(位) 2． 计算机最基本存储计量单位是:Bytes(字节) 3． Bit和Bytes的关系:8Bit=1Bytes 4． 其他常用单位:1K ...