CSS圆角，尖角，投影实现

最新推荐文章于 2021-08-04 07:49:40 发布

梦想涨价了

最新推荐文章于 2021-08-04 07:49:40 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： class Class css CSS div function 网络

本文链接：https://blog.csdn.net/enterys/article/details/7547396

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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="#"  οnmοuseοver="check()" οnmοuseοut="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>：

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

梦想涨价了

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS圆角，尖角，投影实现

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

扫一扫