CSS怎么实现半圆 原理及方案是什么
|
这篇文章主要讲解了“CSS怎么实现半圆，原理及方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现半圆，原理及方法是什么”吧！ CSS怎么实现半圆？ 半圆 半圆分为：上半圆、下半圆、左半圆、右半圆，我们只要学会制作某一个方向的半圆，其他方向的半圆都可以轻松实现，其原理都一样。 假如我们要制作上半圆，实现原理：把高度height设置为宽度width的一半，并且左上角和右上角的圆角半径定义为元素的高度一致，而右下角和左下角的圆角半径定义为0. 而右下角和左下角的圆角半径定义为0. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>半圆角</title> <style type="text/css"> p{ width: 100px; height: 50px; border:1px solid black; background-color: blue; border-radius: 100px 100px 0 0; } </style></head><body> <p></p></body></html> 圆 实现方式：宽度、高度设置为一样，然后四角圆角半径设置为宽度、高度的一半 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆</title> <style type="text/css"> p{ width: 100px; height: 100px; border:1px solid black; background-color: blue; border-radius: 50px; } </style></head><body> <p></p></body></html> 关于“CSS怎么实现半圆，原理及方法是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，小编每天都会为大家更新不同的知识。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
