首页 > html+css >正文

圆角border-radius案例

发布时间：2024-08-14 11:11 作者：一友画

案例1

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #FF0000;border-bottom-right-radius: 55px 75px;}
</style>
<div></div>

案例2

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #FF0000;border-radius: 45px/85px;}
</style>
<div></div>

案例3

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #FFFF00;border: 1px solid #000;border-radius: 20px;}
</style>
<div></div>

案例4

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #FFFF00;border: 1px solid #000;border-radius: 50px;}
</style>
<div></div>

案例5

案例代码示例：

<style type="text/css">
div{width: 100px;height: 50px;background: #FF0000;border-radius: 50px 50px 0 0;}
</style>
<div></div>

案例6

案例代码示例：

<style type="text/css">
div{width: 80px;height: 80px;background: #FFFFFF;border: 10px solid #f00;border-radius: 50%;}
</style>
<div></div>

案例7

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #88DF8E;border-radius: 0 100%;}
</style>
<div></div>

案例8

案例代码示例：

<style type="text/css">
div{width: 100px;height: 50px;background: #88DF8E;border-radius: 0 50%;}
</style>
<div></div>

案例9

案例代码示例：

<style type="text/css">
div{width: 0px;height: 0px;border: 50px solid #FF0000;border-radius: 50px;border-right-color: #FFFFFF;}
</style>
<div></div>

案例10

案例代码示例：

<style type="text/css">
div{width: 80px;height: 80px;border-radius: 50%;border: 30px solid #FF00FF;border-color: #FF00FF #FF0000 #00FF00 #00FFFF;}
</style>
<div></div>

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！