html中半圆怎么写,css怎么写半圆?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

5f7ec654c0f06e1d1bb362d5d49f926f.png

半圆分为:上半圆、下半圆、左半圆、右半圆,我们只要学会制作某一个方向的半圆,其他方向的半圆都可以轻松实现,其原理都一样。

假如我们要制作上半圆,实现原理:把高度height设置为宽度width的一半,并且左上角和右上角的圆角半径定义为元素的高度一致,而右下角和左下角的圆角半径定义为0.

而右下角和左下角的圆角半径定义为0.

半圆角

div{

width: 100px;

height: 50px;

border:1px solid black;

background-color: blue;

border-radius: 100px 100px 0 0;

}

效果如下:

5a3071f025af9815e4da982ec6a92f3a.png

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

语法:border-radius: 1-4 length|% / 1-4 length|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值