使用border-radius画圆、半圆、扇形

最新推荐文章于 2021-08-04 08:02:31 发布
最新推荐文章于 2021-08-04 08:02:31 发布
阅读量7k 收藏 15
点赞数 5
分类专栏： 前端小白 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuLiangJun001/article/details/105877295
版权
本文介绍了如何使用CSS的border-radius属性来创建圆形、半圆形和扇形效果。内容详细阐述了border-radius的不同数值表示方法，包括px、%、em单位，并通过实例展示了设置不同半径值来实现四种不同的形状。最后，文中给出了具体的效果展示。
摘要由CSDN通过智能技术生成

使用border-radius画圆、半圆、扇形

！！！注意：ie9以下的浏览器是不支持 border-radius属性的

border-radius的数值有三种表式方法：px、%、em。这里说明一下 em是倍数 1em=16px

border-radius可以设置水平和垂直方向的半径border-radius:10px/20px 如果省略垂直方向的半径，则默认与水平半径相等border-radius:10px 等效于border-radius:10px/10px

border-radius的多值书写：

  • 一个值时：border-radius:10px：表示四个角的半径
  • 两个值时：border-radis:10px 20px：10表示左上右下的角，20表示右上左下的角
  • 三个值时：border-radius:10px 20px 30px：10表示左上角，20表示右上左下的角，30表示右下角
  • 四个值时：border-radius:10px 20px 30px 40px：10表示左上，20表示右上，30表示右下，40表示左下（顺时针）

了解前面的知识后，开始动手完成本文目标

<head></
最低0.47元/天 解锁文章
LuLiangJun001
关注
专栏目录
border-radius制作圆形，半圆形，扇形，椭圆
Elna_99的博客
03-19 3373
使用border-radius 制作圆形有两点技巧： （1）元素的宽高形同 （2）border-radius值为宽或高的一半，或者直接设置为50%； 制作半圆大同小异，只是圆角方位配合的问题。 下面仅给出示例： html代码： DOCTYPE html> html lang="en"> head>     meta charset="UTF-8">     meta n
border-radius画圆以及border绘制图形
qq_44087363的博客
11-16 4709
border-radius画圆以及border绘制图形 1. 利用border-radius绘制圆形类图形 border-radius是一个简写属性，它包含4个方向的属性设置 border-top-left-radius左上， border-top-right-radius右上 border-bottom-left-radius左下 border-bottom-right-radius右下 另外每个方向上的border-radius值由x/y方向上的半径决定，1个半径值则是正圆弧，2个半径值则是椭圆弧 4
css圆角边框
qq_43667537的博客
10-27 276
1、圆角边框使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .yuanxing
border-radius 画圆
amnotsuperior的专栏
09-18 510
.slideBox .hd ul li { float:left; margin-right:5px; width:13px; height:13px; line-height:14px; text-align:center; background:#cacaca; cursor:pointer; border-radius:20px; /* 目的画圆 */ }
border-radius属性设置半圆弧线
qq_44505797的博客
02-18 4478
开发工具与关键技术：DW border-radius属性 作者：Mr_肖先生 撰写时间：2019年2月18日 这是在今天写css3时碰到的，想要弄个微笑的表情却不知如何下手，然后想到了border-radius设置圆角，试了很久还是弄不出来，最后发现了border-radius的一个新的写法，话不多说，看例子： &lt;div class="div1"&gt; &lt;div class=...
CSS border-radius画圆
热门推荐
10-20 1万+
1.CSS画实心圆 长度和宽度相等，border-radius设置为长度（宽度）的一半。 #circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; } 2.CSS画空心圆 和画实心圆方法类似，只是将border大小
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
09-25
除了创建圆形和普通的圆角，`border-radius`还可以用来创建半圆和四分之一圆。例如，要创建一个实心圆，可以设置元素的宽度和高度相等，并将`border-radius`设为宽高的一半。以下是一些示例： ```css /* 实心圆 */ ...
CSS3使用border-radius属性制作圆角
09-25
在网页设计中，CSS3的border-radius属性是一个强大的工具，它使得我们可以轻松地为HTML元素创建圆角，而无需使用图片或者其他复杂的布局技巧。本篇文章将深入探讨CSS3的border-radius属性，以及如何通过它来制作圆角...
html用border制作扇形,用CSS3中的border-radius属性制作常用图形
weixin_31998661的博客
06-16 684
CSS3新增了很多属性，有些属性非常的实用，不仅提高了工作效率，而且让页面的颜值变得更高。比如CSS3 中的border-radius属性，我们可以用它来绘制一些常用的图形，从而减轻美工的负担。这篇文章就和大家分享，如何用border-radius属性制作正圆，半圆，扇形，弧形。有兴趣的小伙伴可以看看， 希望可以帮助到你。1、用border-radius制作正圆border-radius属性的四个...
用CSS3的圆角border-radius属性,画一个圆形
ITX2000的专栏
08-20 1万+
习惯了方方框框，我们会使用圆角技术使网页变得很圆润，而不是一个个棱角。圆角被广泛运用于网页中，比如把边框加个圆角，这是最流行的用法，让网页看起来很舒服。还有就是用户的头像，把它做成一个圆形的，看到现在的网页中出现的频率也很大。 以前制作圆角的方法比较繁琐，山顶角、洋葱皮、PS切图、制图…一系列的技巧，而现在我们可以利用CSS3的一个属性就可以轻松实现圆角，甚至是各种畸形的形状。 border-
CSS: border-radius绘制椭圆
weixin_39015132的博客
09-03 5991
前言 设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。 开始 一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如： 实践 语法描述： border-radius: 1-4 length|% / 1-4 length|%; 一般写法： border-radius: 50%; 等价于： border-radiu...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
weixin_39689377的博客
06-04 552
自从有了css3,我们可以制作各种各样的图形了，制作圆角也可以不使用图片了，我们可以使用border-radius可以制作圆角，椭圆等图形。下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏览)。css代码：.content-wrap {height:auto;overflow:hidden;}.content-wrap h3 {height:30px;margin-top:40px;}...
css 制作1 4半圆,css3使用border-radius制作圆和半圆
weixin_39569753的博客
08-04 355
border-radius制作实心圆实现思路：将div的宽度(width)和高度(height)值设为相等，即正方形DIV，并且DIV的四个圆角值都设置为其宽度值的一半CSS3 border-radius制作实心圆 - http://www.manongjc.com#box{width:200px;height:200px;border-radius:50%;background-color:re...
Html怎么把文本框边缘变半圆,css圆角怎么弄个半圆？
weixin_35867608的博客
06-03 2025
CSS3是CSS(层叠样式表)技术的升级版本，CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。border-radius制作半圆：把div高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。CSS3 border-radius属性 - http://www.manongjc....
css的border-radius圆角\椭圆\半圆\扇形\叶形
monkey7
04-29 577
border-radius: 50%; 上 右 下 左 border-radius:(顺时针方向) 四个值: 左上 右上 右下 左下 三个值: 左上 右上/左下 右下 两个值: 左上/右下 右上/左下 一个值: 左上 右上 右下 左下 圆角： 项目中的应用（焦点/banner/轮播图 小圆点称为分页器）标签 价格等 椭圆： 垂直半径=高/2 水平半径=宽/2 半圆： 宽/高=2 border-radius:高 高 0 0 扇形： 100% 0 0 .
使用边框画圆深入理解border-radius
qq_39194067的博客
10-23 2299
在css中经常会用到border-radius来画一个圆圈的效果。但是之前并不知道为什么。今天就深入研究一下。 什么是radius radius，半径的意思。结合border边框属性，边框的半径是啥意思呢？个人的理解是给边框一个弧度，radius就是这个弧度半径的值。像下面这样。 所以如果想要画一个圆只需要将div的宽度=2*radius即可实现圆的效果。 border-radius的分类 大家...
CSS3【border-radius】制作半圆
weixin_30550271的博客
08-06 229
1.利用css如何制作一个半圆？（思路：对样式border-radius以及宽高的控制） div{ display: inline-block; border:1px solid #6baabb; width:40px; height:40px; float:left; margin:0px 10px; } a{ di...
border-radius两边半圆
最新发布
07-27
border-radius属性可以用于设置一个元素的边框的圆角。如果你想要设置两边半圆的效果，你可以使用以下的CSS代码： ```css .element { border-radius: 50% / 100% 100% 0 0; } ``` 在上面的例子中，`50%`表示圆角的半径为元素宽度的一半，`100% 100% 0 0`表示只在左上角和右上角添加圆角，而其他的角保持直角。 你可以根据需要调整`border-radius`的值来达到想要的效果。希望这个回答能够帮到你！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值