您好,登录后才能下订单哦!
这篇文章主要介绍了css如何让一个圆隐藏一半,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
方法:1、将圆形元素放置在div容器中;2、将div的高度设置为圆形的半径长度,将div的宽度设置为圆形的直径长度,使div正好只能放入半个圆;3、给div元素添加“overflow: hidden”样式,将在div外面的半个圆隐藏即可。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css怎么让一个圆隐藏一半
在css中,可以先将一个圆形元素放到一个div中,然后把div的高度设置为圆形的半径长度,宽度设置为圆形的直径长度。
这时候再利用overflow属性将超出div的圆形部分隐藏即可。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .mask2{ width: 100px; height: 50px; overflow: hidden; } .round2{ width: 100px; height: 100px; background-color: cornflowerblue; border-radius: 50px; } </style> </head> <body> <div class="mask2"> <div class="round2"></div> </div> </body> </html>
输出结果:
感谢你能够认真阅读完这篇文章,希望小编分享的“css如何让一个圆隐藏一半”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。