详解border-radius属性

最新推荐文章于 2024-04-23 22:27:30 发布
最新推荐文章于 2024-04-23 22:27:30 发布
阅读量1k 收藏 1
点赞数
分类专栏： CSS特效与动画 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ningmengyouzhi/article/details/128002055
版权

目录

圆角边框

完整形式8参数

border-radius : 右上角的水平 左上角的水平 左下角的水平 右下角的水平 / 右上角的垂直 左上角的垂直 左下角的垂直 右下角的垂直;

例子

在这里插入图片描述

讲解

这里只举例右上角水平和右上角垂直，其他角同理。效果可以这样理解在这里插入图片描述
只有一个右上角垂直长度，没有右上角水平长度的也不能构成一个弧度

4参数

border-radius : 右上角弧度 左上角弧度 左下角弧度 右下角弧度

在这里插入图片描述

3参数

border-radius : 右上角弧度 左上角和右下角弧度 左下角弧度

在这里插入图片描述

2参数

border-radius : 右上角和左下角弧度 左上角和右下角弧度

在这里插入图片描述

1参数

border-radius : 所有角弧度
在这里插入图片描述

配合使用

在这里插入图片描述

理解

“/” 分割左右两边 即 左边为水平 右边为垂直

左边又是两个参数即 右上和左下的水平 左上和右下的水平
右边又是一个参数即 所有角的垂直

综上：右上水平50 左上水平20 左下水平50 右下水平20 / 右上垂直80 左上垂直80 左下垂直80 右下垂直80

吃蜡笔的小新
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 border-radius属性详解
12-09
有什么用？ 这个radius属性，可不只是设置圆角，还可以用来画一些简单的图形。 画个圆形 #demo1 { width:100px; height:100px; background:red; border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆？ 如下，把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
玩转border-radius
玲曦的博客
12-23 409
border-radius 圆角 1、border-radius的值可以为绝对单位px，和相对单位em，rem，也可以为百分比，值越大，弧度越大。 2、属性值位数不同时，表现也不同，具体可以参考图片。 3、你也可以设置单个角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。 注意: 每个半径的四个值的顺序是： 左上...
CSS3 border-radius 属性
努力努力再努力
11-07 2万+
！！！截取自：https://www.cnblogs.com/happymental/p/7891725.html 　　通常我在使用这个属性的时候，一般都是用在给div或者button加上一点圆角弧度，显得好看一点，或者用来画一个圆形div。用的稍微高级一点的，也就是用来画了一个右半圆来做为侧边栏的展开/收缩按钮。 　　   一、border-radius使用 　　border-radi...
一个关于border-radius值设置的问题记录
DuBenBen的博客
06-12 1119
问题记录 今天本打算要完成一个类似于进度条的小组件， 原型是这样的(这里长200px, 高28px) 我一看， 很简单嘛， 抛开那个数字1样式不谈， 整体父级样式就是一个左边半圆形， 右边带有弧度的div啊。 这个用css的border-radius就可以搞定了啊。 左边是圆角， 圆角50px啊， 右边是小圆角， 以往的div都是8px弧度的。 根据border-radius中角的顺序(以...
ReactNative组件的borderColor和borderRadius属性踩坑记录
桑心剑
12-14 2万+
问题 今天小程序平台项目中发现Android上自定义的ReactNative的Text组件样式显示不正确，具体表现如下图所示： 可以看到图中组件显示主要存在两个问题： 1、左右黑边；2、左右锯齿； 好嘛，这里自定义的组件是继承RN原有组件生成的，于是果断把同样的样式代码放到RN自己的Text组件里写个demo一看，竟然也有这两个问题。再换View组件也试一下，好吧，表现一样，demo代码如下： ...
border-radius(CSS3属性)
热门推荐
qq_43812504的博客
12-08 5万+
一、border-radius 完整写法： border-radius:为元素添加圆角边框。 border-radius:10px 20px 30px 40px/40px 30px 20px 10px “/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。 水平半径和垂直半径表示如下： 比如： border-radius: 2em 1em 4em / 0.5em 3em;等同于 border-top-left-radius: 2em 0.5em; border-top-right-radi
了解CSS圆角：border-radius
qq_43467284的博客
07-13 2740
是css的一个属性，主要用来给元素的外边框绘制圆角效果，通过这个属性，可以实现椭圆、叶子、花瓣等各式各样的圆角效果。可设置四个方位的圆角，每一个圆角可以理解成都是由其x轴和y轴形成的椭圆的1/4弧。
Echarts 柱状图配置圆角
Mr-yang的随笔
12-28 9265
在option中的series中配置barBorderRadius属性： 弧度分别为 【左上，右上，右下，左下】 series: [{ name: '结构化数据量(万)', type: 'bar', barWidth: 12, data: this.data2, z: '100000', color: '#4499e9', itemStyle: { // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 normal:
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
weixin_35907598的博客
06-04 4676
在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。1234-webkit-border-ra...
圆角边框border-radius
qq_27523025的博客
02-04 224
圆角框
CSS3 border-radius圆角的实现方法及用法详解
11-19
以前想实现一个圆角是比较麻烦的，不过现在CSS3来了，实现圆角变的那么的简单只需要一句话：border-radius即可。下面青岛星网跟大家分享下：border-radius的具体用法。
css3(border-radius)边框圆角详解
11-18
前端必须要掌握的几个CSS3的属性详解
01-21
Border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 343
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 691
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 511
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1127
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1410
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
最新发布
qq_41807399的博客
04-23 486
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
border-radius属性及基本语法
08-23
border-radius属性用于设置元素的边框的圆角。它是一个简写属性，可以同时设置四个边角的圆角半径。基本语法如下: border-radius: 水平圆角半径 垂直圆角半径; 其中，水平圆角半径表示左上角和右下角的圆角半径，垂直圆角半径表示右上角和左下角的圆角半径。可以使用具体的长度值（如px、em等）或百分比值来设置圆角半径。如果只设置一个值，则水平圆角半径和垂直圆角半径相同。如果设置两个值，则第一个值表示水平圆角半径，第二个值表示垂直圆角半径。如果设置四个值，则分别表示左上角、右上角、右下角和左下角的圆角半径。 例如，如果要为一个元素设置相同的圆角半径为10px，可以使用以下语法: border-radius: 10px; 如果要为一个元素设置水平圆角半径为10px，垂直圆角半径为20px，可以使用以下语法: border-radius: 10px 20px; 如果要为一个元素设置四个不同的圆角半径，可以使用以下语法: border-radius: 10px 20px 30px 40px; 希望以上信息对您有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS3圆角详解](https://blog.csdn.net/weixin_42659625/article/details/81085841)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS边框属性一---border-radius](https://blog.csdn.net/weixin_39645019/article/details/118375945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值