css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角。

圆角属性即 border-radius 属性,通过该属性我们可以给任何元素制作 "圆角"。

(学习视频分享:java视频教程)border-radius 所有四个边角 border-*-*-radius 属性的缩写

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

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

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

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

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

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

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

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

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

一个值: 四个圆角值相同

以下为三个实例:

1、四个值 - border-radius: 15px 50px 30px 5px:

2、三个值 - border-radius: 15px 50px 30px:

3、 两个值 - border-radius: 15px 50px:

代码示例:#rcorners4 {

border-radius: 15px 50px 30px 5px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners5 {

border-radius: 15px 50px 30px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners6 {

border-radius: 15px 50px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

相关推荐:CSS教程

html盒子圆角属性,css圆角属性是什么相关推荐

  1. html页面透明度属性,css透明度属性是什么?

    css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  2. css margin属性,css margin属性怎么用?css margin属性用法教程

    在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程. margin是css用于在一个声明中,对所有css ...

  3. 06 【CSS字体属性 CSS文本属性】

    8.CSS字体属性 CSS Fonts(字体)属性用于定义:字体系列.大小.粗细.和 文字样式(如:斜体). 8.1字体族 font-family 字体族(字体的格式) CSS 使用 font-fam ...

  4. css列表格式属性,css list-style-type属性笔记

    list-style-type属性定义及用法 在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...

  5. css的fill属性,css column-fill属性怎么用

    css column-gap属性定义及用法 在css中,column-gap属性通常和columns.column-count等分列属性一起使用,用来设置元素内容分列(多列布局)后列与列之间的距离 c ...

  6. java font属性,css font-family属性怎么用

    原标题:css font-family属性怎么用 css font-family属性怎么用? 属性定义及使用说明 font - family属性指定一个元素的字体. font-family 可以把多个 ...

  7. html的动画属性,css动画属性使用及实例代码(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  8. html中页面背景属性,css背景属性有哪些?

    css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...

  9. html的过渡属性,CSS过渡属性 transition

    css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标划过.单击.获得焦点或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 过渡属性需要触发事件, ...

最新文章

  1. java培训教程:什么是匿名内部类?怎样创建匿名内部类?
  2. 2020下半年新机最新消息_2020年下半年即将发布的手机,你们期待吗
  3. 【洛谷P1381】单词背诵
  4. 高级语言程序设计用c语言描述答案,清华大学出版社-图书详情-《高级语言程序设计(C语言描述)第2版》...
  5. 减治法解决俄式乘法问题(JAVA)
  6. PyTorch 1.0 中文官方教程:使用PyTorch进行深度学习
  7. 洛谷 1485 火枪打怪
  8. 14.mac apche
  9. ISO50001认证辅导,ISO50001能源管理体系认证至少符合以下条件
  10. 微信api接口调用-触发推送微信群聊列表
  11. Android性能测试工具(一) 之Emmagee[转载]
  12. 正则表达式学习实践心得——来源于codesheep(羊哥)
  13. 每天一道算法题——拼音翻译成阿拉伯数字(只有数字拼音)
  14. Lab1过程及心得体会
  15. 【happyz】MATLAB-FM仿真01
  16. 阿里云ACP云计算错题集121-140
  17. 从头到脚说单测——谈有效的单元测试(上篇)
  18. 有幸被推荐到首批Oracle YEP计划
  19. 有关计算机知识的活动总结,计算机兴趣小组活动总结范文
  20. 数学建模-2014年D题 储药柜的设计

热门文章

  1. 安装计算机ppt,计算机软件安装.ppt
  2. 360 safe.php,360safe/360webscan.php · 漫步者/quguoren - Gitee.com
  3. nodejs+vue+elementui在线考试系统express vscode
  4. 林觉民《与妻书》:最刻骨铭心的爱
  5. Python 库(详细整理)简要说明用途
  6. PageAdmin、WordPress与dedeCMS网站模板制作总结
  7. ZOJ2411连连看(link link look)题解
  8. 如何在SQL Server 2005 中存储立方米
  9. java使用List<>存储数据,数据重复
  10. 名词解释:DMA分区、