您的位置：首页 > 其它

用clip剪裁实现半圆

2015-12-16 11:21 295 查看

定义和用法

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航