當(dāng)前位置：
首頁 >
css3画半圆
發(fā)布時(shí)間：2023/12/31
52
豆豆
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的兼容性設(shè)置*/}.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 的時(shí)候才是生效的。*/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實(shí)現(xiàn)半圓</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 方法剪裁實(shí)現(xiàn)半圓</h2><p style="color: red;">clip 屬性剪裁絕對定位元素。也就是說，只有 position:absolute 的時(shí)候才是生效的。唯一合法的形狀值是：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>總結(jié)
- 上一篇： 荣耀战力加的太少怎么办 荣耀官网荣耀手机
- 下一篇： 正则匹配 http或者 https开头的