要设置DIV的圆角,最简单的办法莫过于使用CSS3配合HTML5,如果加上jquery,那么就更加灵活了,下面我们看几个例子。

首先看看下面的这个图,下面的有编号内容的这个DIV,正是圆角的DIV,要实现起来实在太简单了。

如果要实现上面的这个DIV的圆角,使用下面的一行代码即可。

$("#DIV的ID号").css("border-radius","9px");

注意,这是jquery的代码。其中,border-radius是圆角属性,四条边都是圆角。9px是圆角的弧度。

如果不使用上面的代码,可以直接使用CSS3的来实现,看下面的样式表代码:

#rcorners1 {

border-radius: 25px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

圆角

知识拓展:

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

属性                    描述

border-radius     所有四个边角 border-*-*-radius 属性的缩写

border-top-left-radius     定义了左上角的弧度

border-top-right-radius     定义了右上角的弧度

border-bottom-right-radius     定义了右下角的弧度

border-bottom-left-radius     定义了左下角的弧度

html div怎么设置圆角,jquery设置div圆角相关推荐

  1. Jquery 给div设置背景图

    jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了 $(this).css(&quo ...

  2. HTML怎么设置图片和文字间距离,div字间距-div内文字之间间距设置方法

    div内字与字间距是否可以用CSS代码实现? 答案:可以使用css实现letter-spacing 1.语法: letter-spacing:3px -- 设置对象字间距为3px间隔. 2.对所有di ...

  3. html汉字间的间距,div字间距-div内文字之间间距设置方法

    本篇文章给大家带来的内容是关于div字间距-div内文字之间间距设置方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. div内字与字间距是否可以用CSS代码实现? 答案:可以使用c ...

  4. html5导航栏文字间距,div字间距-div内文字之间间距设置方法

    本篇文章给大家带来的内容是关于div字间距-div内文字之间间距设置方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. div内字与字间距是否可以用CSS代码实现? 答案:可以使用c ...

  5. html中设置父div的透明度不影响子div透明度

    在设置div的透明度的时候发现设置了父div的透明度(opacity=0.5),子div的透明度也随着改变了,并且设置子div的透明度不起作用,这种情况下可以使用rgba来设置父div的透明度:例如设 ...

  6. html div居中属性,css布局设置div水平居中

    要让div程度居中配置margin属性便可. 1.居中枢纽CSS代码:margin:0 auto margin:0 auto为甚么能让div 居中评释: margin:0 auto拆分为margin- ...

  7. div 设置相对比例 即div width 100 无效

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...

  8. html设置内容居中,设置div内容居中

    接下来要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框. 接下来就在div中添加内容,如下图所示,运行后会发现内容偏向于左上角. 给div设置水平居中,如下图所示. 如何设置d ...

  9. div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式

    div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...

最新文章

  1. Django内置分页扩展
  2. 高效读取大文件,再也不用担心 OOM 了!
  3. nGQL知识点总结-20210719
  4. 预科教育计算机基础知识重点归纳,民族预科班计算机教育论文
  5. 乘幂法、复化梯形以及二分法求特征值【相关例题python实现】
  6. 蓝桥杯 ALGO-21算法训练 装箱问题 java版
  7. 清理delphi项目文件 .bat
  8. ...提升网站程序开发安全的6大诀窍...
  9. 人工智能AI系列 - 问答系统
  10. python十六进制转十进制_python实现进制转换(二、八、十六进制;十进制)
  11. 最大数[抽象排序之抽象规则]
  12. Crucible安装使用
  13. 采用动态规划思维求解数塔问题,c++实现
  14. python-爬取中国评书网音频
  15. 一步步看α-β剪枝算法
  16. 取消 window 7 激活提示
  17. 咕咚已上传服务器怎到不丁微信,微信运动怎样使用咕咚数据?
  18. WiFi adb studio使用WiFi进行运行调试
  19. CSDN-markdown技巧
  20. 挖个冰块就能修自己!用「冰」做的科考机器车

热门文章

  1. cts测试之host_config.xml
  2. 《Python Enhancement Proposal #8》要点 学习摘录
  3. Vuejs --01 起步
  4. Android基础知识点的整理3
  5. ThinkPHP框架2.1版本单步执行过程
  6. GitHub 在热门 Node.js changelog 开源库Standard Version中发现 RCE 漏洞
  7. 跨域单点登录方案实现
  8. 如何发布自己的 Composer 包
  9. CSS实现水平垂直居中的方法总结
  10. Java多线程再理解(synchronized)