CSS圆角，尖角，投影实现

关注

原创最新推荐文章于 2026-06-22 10:29:58 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

CSS clip-path与drop-shadow：打造独特UI元素的创意组合本文深入探讨了CSS clip-path与drop-shadow这对创意组合，如何突破传统UI设计的‘方盒子’限制。通过clip-path裁剪任意自定义图形，再结合drop-shadow生成精准的形状阴影，开发者无需依赖图片或SVG，即可用纯CSS高效打造不规则按钮、气泡对话框等独特UI元素，并实现流畅动画与响应式适配。阅读详情

border-radius属性

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

　border-radius: 15px;

　border-radius属性可以选四个，分别代表每个拐角

　border-radius: 15px 5px 25px 0px;

尖角：

<style type="text/css">
body {
	margin:50px 0 0 50px;
}
ul, li {
	padding:0px;
	list-style:none;
	margin:0;
}
div {
	padding:10px;
	border:3px solid #CCCCCC;
	position:relative;
	margin:10px;
	float:left;
	width:200px;
	height:70px;
	border-radius:10px;
}
p {
	text-indent:2em;
}
.cusp01,.cusp02 {
	position:absolute;
	display:block;
	height:0px; line-height:0px;
}
#top_cusp {
}
#top_cusp .cusp01 {
	left:100px;
	top:-12px;
	border-top:0px;
	border-bottom:9px solid #CCCCCC;
	border-right:9px solid #fff;
	border-left:9px solid #fff;
}
#top_cusp .cusp02 {
	left:-6px;
	top:6px;
	border-top:0px;
	border-bottom:6px solid #fff;
	border-right:6px solid #CCCCCC;
	border-left:6px solid #CCCCCC;
}
#top_cusp li{
	font-size: 14px;
	color: #666666;
}
</style>

<script type="text/javascript">
	function check(){
	document.getElementById("top_cusp").style.display="block";
	}	
	function edit(){
	document.getElementById("top_cusp").style.display="none";
	}
</script>

<body>
<a href="#"  onmouseover="check()" onmouseout="edit()" style="margin-left: 115px;" >查看</a>
<br />
<div id="top_cusp" style=" display: none;"> 
	<div style=" background-color: red">
		<ul>
			<li>详细信息：</li>
			<li>数量:</li>
			<li>网络：</li>
			<li>检测：</li>
		</ul>
		<span class="cusp01"><span class="cusp02"></span></span>
	</div>
</div>
</body>

投影：

属性：

box-shadow：<length> <length> <length> <length> || <color>

取值：

<length> <length> <length>? <length>? || <color>：

阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色