可以画个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. javascript 事件对象

    1.事件对象  用来记录一些事件发生时的相关信息的对象  A.只有当事件发生的时候才产生,只能在处理函数内部访问  B.处理函数运行结束后自动销毁2.如何获取事件对象  IE: window.even ...

  2. 对C#泛型中的new()约束思考

    对于new()约束,大家可能有一个误解,以为使用了new约束之后,在创建对象时与非泛型的版本是一致的:<public class Tester<T> where T:new() {  ...

  3. PHPCMS二次开发教程

    PHPCMS V9 结构设计 根目录|–api  结构文件目录|–caches 缓存文件目录   |– configs 系统配置文件目录   |– caches_* 系统缓存目录|–phpcms  p ...

  4. Python学习笔记——正则表达式入门

    # 本文对正则知识不做详细解释,仅作入门级的正则知识目录. 正则表达式的强大早有耳闻,大一时参加一次选拔考试,题目就是用做个HTML解析器,正则的优势表现得淋漓尽致.题外话不多讲,直接上干货: 1. ...

  5. 2016031401 - ubuntu显示桌面快捷键

    ubuntu显示桌面快捷键设置 步骤如下:系统设置->键盘->快捷键->窗口->最小化窗口 个人设置的是super+D,super就是window下的win键.

  6. 本博客css style

    #navList { min-height: 60px; } #navList li { height: 60px; } #navList a { margin: 0px 5px !important ...

  7. ARM 的Thumb状态测试

    作为一个使用ARM的学习者,有必要全面了解你的处理器内核.尽管有些内容可能在实际应用中用不到,但是“了解”还是很必要的.Thumb状态,是ARM的一个特色,但是你知道Thumb状态与ARM状态最大的区 ...

  8. IT全称

    1.jar,war,ear(摘自:http://blog.sina.com.cn/s/blog_54bb7b950100wnbb.html) Jar文件(扩展名为. Jar)包含Java类的普通库.资 ...

  9. 【UVA 1395】 Slim Span （苗条树）

    [题意] 求一颗生成树,满足最大边和最小边之差最小 InputThe input consists of multiple datasets, followed by a line containin ...

  10. VisualStudio替换所有空行

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3371620.html] Ctrl+Shift+H 查找内容\r\n\r\n   //如果要替换 ...