border-radius制作圆形，半圆形，扇形，椭圆

最新推荐文章于 2022-05-31 15:21:06 发布
最新推荐文章于 2022-05-31 15:21:06 发布
阅读量3.3k 收藏 6
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Elna_99/article/details/63681946
版权

使用border-radius 制作圆形有两点技巧：

（1）元素的宽高形同

（2）border-radius值为宽或高的一半，或者直接设置为50%；

制作半圆大同小异，只是圆角方位配合的问题。

下面仅给出示例：

html代码：

<!DOCTYPE html >
< html  lang= "en" >
< head >
     < meta  charset= "UTF-8" >
     < meta  name= "viewport"  content= "width=device-width, initial-scale=1.0" >
     < meta  http-equiv= "X-UA-Compatible"  content= "ie=edge" >
     < title >Document </ title >
     < link  href= "D:\myweb\css\3-19-1.css"  type= "text/css"  rel= "stylesheet" >
</ head >
< body >
     < div  class= "div" >圆 </ div >
 
     < div  class= "semicircle top" >上半圆 </ div >
     < div  class= "semicircle right" >右半圆 </ div >
     < div  class= "semicircle bottom" >下半圆 </ div >
     < div  class= "semicircle left" >左半圆 </ div >
</ body >
</ html >
css代码：

.div{
     width:  200px;
     height:  200px;
     border: 2px   orange  solid;
     border-radius:  50%;
}
.semicircle{
     background-color:  orange;
     margin:  30px;
}
.top{
     width:  100px;
     height:  50px;
     border-radius:  50px  50px  0  0;
}
.right{
     width:  50px;
     height:  100px;
     border-radius:  0  50px  50px  0;
}
.bottom{
     width:  100px;
     height:  50px;
     border-radius:  0  0  50px  50px;
}
.left{
     width:  50px;
     height:  100px;
     border-radius:  50px  0  0  50px;
}

效果如下：


制作扇形遵循三同一不同的原则，三同就是宽高半径相同，一不同就是圆角位置不同。

.div{
     width:  200px;
     height:  200px;
     border: 2px   orange  solid;
     border-radius:  50%;
}
.semicircle{
     background-color:  orange;
     margin:  30px;
}
.top{
     width:  100px;
     height:  100px;
     border-radius:  100px  0  0  0;
}
.right{
     width:  100px;
     height:  100px;
     border-radius:  0  100px  0  0;
}
.bottom{
     width:  100px;
     height:  100px;
     border-radius:  0  0  100px  0;
}
.left{
     width:  100px;
     height:  100px;
     border-radius:  0  0  0  100px;
}

椭圆：

.semicircle{
     background-color:  orange;
     margin:  30px;
}
.top{
     width:  100px;
     height:  50px;
     border-radius:  100px/ 50px;
}
.right{
     width:  50px;
     height:  100px;
     border-radius:  50px/ 100px;
}

Elna_99
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3的Border-radius轻松制作圆角
01-19
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，...
圆角border-radius （实现圆（椭圆 胶囊 半椭圆） 和 三角形） 以及源码分析
qq_45288176的博客
06-16 1500
二 实现三角形三：特殊图形（实例分析） 背后红色背景怎么设置 ？上半部分为矩形 下半部分为下半椭圆形
HTML+CSS画圆、半圆、扇形、三角形
weixin_50419323的博客
09-05 2971
使用border-radius：____px代码实现圆，半圆，扇形，三角形 1、圆 html中设定一个盒子 css中盒子样式 代码实现图 2、半圆 html中设定一个盒子 css中盒子样式 代码实现效果图 3、扇形 html中设定一个盒子 css中盒子样式 代码实现效果图 4、三角形：善用transparen （透明） html中设定一个盒子 css中盒子样式 ...
使用border-radius画圆、半圆、扇形
LuLiangJun001的博客
05-01 6820
使用border-radius画圆、半圆、扇形 ！！！注意：ie9以下的浏览器是不支持 border-radius属性的 border-radius的数值有三种表式方法：px、%、em。这里说明一下 em是倍数 1em=16px border-radius可以设置水平和垂直方向的半径border-radius:10px/20px 如果省略垂直方向的半径，则默认与水平半径相等border-radiu...
html用border制作扇形,用CSS3中的border-radius属性制作常用图形
weixin_31998661的博客
06-16 641
CSS3新增了很多属性，有些属性非常的实用，不仅提高了工作效率，而且让页面的颜值变得更高。比如CSS3 中的border-radius属性，我们可以用它来绘制一些常用的图形，从而减轻美工的负担。这篇文章就和大家分享，如何用border-radius属性制作正圆，半圆，扇形，弧形。有兴趣的小伙伴可以看看， 希望可以帮助到你。1、用border-radius制作正圆border-radius属性的四个...
border-radius画圆以及border绘制图形
qq_44087363的博客
11-16 4442
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
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
weixin_39689377的博客
06-04 493
自从有了css3,我们可以制作各种各样的图形了，制作圆角也可以不使用图片了，我们可以使用border-radius可以制作圆角，椭圆等图形。下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏览)。css代码：.content-wrap {height:auto;overflow:hidden;}.content-wrap h3 {height:30px;margin-top:40px;}...
CSS: border-radius绘制椭圆
weixin_39015132的博客
09-03 5755
前言 设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。 开始 一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如： 实践 语法描述： border-radius: 1-4 length|% / 1-4 length|%; 一般写法： border-radius: 50%; 等价于： border-radiu...
border-radius知识点详解，包含如何画圆、如何画椭圆，并且实现用css画一个哆啦A梦
weixin_40563746的博客
05-31 815
用到的知识点：border-radius 知识点说明：border-radius有四个方向（左上、右上、右下、左下）、两个半径（水平半径、垂直半径）。写birder-radius属性的时候，先写水平半径，再写垂直半径，中间用/隔开。例如： border-radius: 10px 10px 20px 20px / 10px 10px 20px 20px 分别表示：左上水平半径 右上水平半径 右下水平半径 左下水平半径 / 左上垂直半径 右上垂直半径 右下垂直半径 左下垂直半径 省略的写法和padding、m
css border-radius的用法及自适应的椭圆
xiaozhen0610的博客
07-01 1023
我们知道border-radius允许您为元素添加圆角边框！ 而border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。 先看个例子。 如果将有个正方形元素设置一个border-radius值为边长的一半，则可以得到一个圆形。 width: 200px;height: 2
css的border-radius圆角\椭圆\半圆\扇形\叶形
monkey7
04-29 526
border-radius: 50%; 上 右 下 左 border-radius:(顺时针方向) 四个值: 左上 右上 右下 左下 三个值: 左上 右上/左下 右下 两个值: 左上/右下 右上/左下 一个值: 左上 右上 右下 左下 圆角： 项目中的应用（焦点/banner/轮播图 小圆点称为分页器）标签 价格等 椭圆： 垂直半径=高/2 水平半径=宽/2 半圆： 宽/高=2 border-radius:高 高 0 0 扇形： 100% 0 0 .
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
css3 border-radius属性详解
12-09
有什么用？... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆？ 如下，把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
CSS3使用border-radius属性制作圆角
09-25
主要介绍了CSS3使用border-radius属性制作圆角，并附上示例代码，推荐给有相同需求的小伙伴。
outline和border的区别
Elna_99的博客
03-31 2848
outline和border显示效果类似。两者的区别是， 1、outline不占用网页布局空间。他是一种动态样式，只有在元素获得焦点或者被激活的时候呈现效果，突出元素的作用。border是盒模型的一部分。 2、outline创建的轮廓线四边都必须是一样的，而border可以不同。outline的外轮廓线必须闭合，不可以只设置一边。 3、outline创建的轮廓线可以向内扩展（将outline
background-origin属性使用示例
Elna_99的博客
03-21 1628
background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。 content-box:背景图像相对于内容框来定位： .padding-box{     width: 314px;     height: 500px;     border: 1p
关于display:block的一点思考
Elna_99的博客
03-04 914
关于这个属性的思考基于一次写手风琴代码的经历，说到这个display:block必须要追溯到什么是块级元素，行内元素，以及各自的特点。 块级元素：每个元素默认独占一行，一行内有一个块级元素后如果不通过添加浮动，是只能有一个块级元素的。 block（块）元素的特点： （1）只能在新的一行上开始。 （2）高度，行高，以及margin， padding都可控制。 （3）宽度缺省的时候是100%
两种盒模型
Elna_99的博客
03-21 542
原来存在两种盒模型，W3C标准盒模型和IE盒模型。两者盒模型下计算元素的宽高不一致，为了实现统一，采取的方法是避免触发IE盒模型，使用声明就可以避免。 下面我们来看看两者的区别。 W3C标准盒模型 width=(margin-left)+(margin-right)+(padding-left)+(padding-right)+(border-left)+border-right+conten
border-radius设置椭圆形
最新发布
09-05
要将边框半径设置为椭圆形，您可以使用CSS的`border-radius`属性。`border-radius`属性接受一个或多个值，用于指定每个角的圆角半径。 要创建一个椭圆形，您可以将两个相等的值分别应用于水平和垂直方向的半径。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值