用clip剪裁实现半圆

定义和用法

clip 属性剪裁绝对定位元素。

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

描述

设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。

浏览器支持

所有主流浏览器都支持 clip 属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .box{width:300px;height:300px;border:1px solid #ccc;margin:100px;position:relative;}
    .circle{width:16px;height:16px;border:1px solid #ccc;background:#fff;position:absolute;top:29px;z-index:1;border-radius:50%;}
    .circle_left{left:-8px;clip:rect(0, auto, auto, 7px);}
    .circle_right{right:-8px;clip:rect(0, 11px, auto, auto);}
    </style>
</head>
<body>
    <div class="box">
        <em class="circle circle_left"></em>
        <em class="circle circle_right"></em>
    </div>
</body>
</html>