欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

css3画半圆

发布时间：2023/12/31 编程问答 53 豆豆
生活随笔 收集整理的这篇文章主要介绍了 css3画半圆 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

css3画半圆de方法

（1）效果：

（2）代码：

<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><style>* {margin: 0; padding: 0;}.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}.clearfix:after {content: '.';display: block;height: 0;clear: both;visibility: hidden;}ul li {list-style: none;float: left;margin: 50px 0 50px 20px;text-align: center;}li {background: red;}h2 {margin-top: 20px;}.circle1 {width: 100px;height: 50px;border-radius: 50px 50px 0 0;line-height: 50px;}.circle2 {width: 50px;height: 100px;border-radius: 0 50px 50px 0;line-height: 100px;}.circle3 {width: 100px;height: 50px;border-radius: 0 0px 50px 50px;line-height: 50px;}.circle4 {width: 50px;height: 100px;border-radius: 50px 0 0 50px;line-height: 100px;}.circle5 {width: 100px;height: 100px;border-radius: 50px;line-height: 100px;}.demo { /*左半圆*/position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/width: 100px;height: 100px;border-radius: 50px;/* line-height: 50px; */clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/}.right-circle { /*右半圆*/left: 200px;clip: rect(0px 100px 100px 50px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/}</style> </head> <body><div><h2>用border-radius实现半圆</h2><ul class="clearfix"><li class="circle1">上边圆</li><li class="circle2">左边圆</li><li class="circle3">下边圆</li><li class="circle4">右半圆</li><li class="circle5">全圆</li></ul><hr><h2>css3的clip 方法剪裁实现半圆</h2><p style="color: red;">clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。唯一合法的形状值是：rect (top, right, bottom, left)</p><ul class="clearfix" style="position: relative;"><li class="demo">左半圆</li><li class="demo right-circle">右半圆</li><li></li></ul></div> </body> </html>

总结

以上是生活随笔为你收集整理的css3画半圆的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。