在web前端里,用css怎么实现半角的效果?
2个回答
展开全部
如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arial; font-size:14px; }
#menu a , #menu a:visited{ float:left; display:block; position:relative; background:#c00;color:#fff; text-decoration:none; padding:6px ; margin:1px 0 0 1px ; }
#menu a span{ height:0; width:0; border-bottom:6px solid #c00; border-left: 6px solid #fff; position:absolute; top:0;left:0; overflow:hidden;}
#menu a:hover{ color:#333; background:#f90;}
#menu a:hover span{ border-bottom:6px solid #f90;}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arial; font-size:14px; }
#menu a , #menu a:visited{ float:left; display:block; position:relative; background:#c00;color:#fff; text-decoration:none; padding:6px ; margin:1px 0 0 1px ; }
#menu a span{ height:0; width:0; border-bottom:6px solid #c00; border-left: 6px solid #fff; position:absolute; top:0;left:0; overflow:hidden;}
#menu a:hover{ color:#333; background:#f90;}
#menu a:hover span{ border-bottom:6px solid #f90;}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-02-03 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
CSS 实现边框浮动效果.半角与_Hover：
页面代码:jsp
<div class="luis" >
<!--
<c:forEach items="${hotelList}" var="l">
<a>${l}</a>
</c:forEach> -->
<h1>luis</h1>
</div>
css:代码
.luis{
border: 1px solid #0344EC;
width:200px;
/* 半径 webkit浏览器 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 5px 0;
padding: 10px 0 10px 0;
/* 减慢速度 transition-duration:0.3s; */
transition-property:margin-left, padding-left, margin-right, padding-right;
transition-duration:0.3s;
transition-delay:0s;
/* Safari */
-webkit-transition-property:margin-left, padding-left, margin-right, padding-right;
-webkit-transition-duration:0.3s;
-webkit-transition-delay:0s;
}
.luis:hover{
/* 加阴影 */
-moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
margin-left: -17px;
padding-left: 17px;
margin-right: -27px;
padding-right: 27px;
}
页面代码:jsp
<div class="luis" >
<!--
<c:forEach items="${hotelList}" var="l">
<a>${l}</a>
</c:forEach> -->
<h1>luis</h1>
</div>
css:代码
.luis{
border: 1px solid #0344EC;
width:200px;
/* 半径 webkit浏览器 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 5px 0;
padding: 10px 0 10px 0;
/* 减慢速度 transition-duration:0.3s; */
transition-property:margin-left, padding-left, margin-right, padding-right;
transition-duration:0.3s;
transition-delay:0s;
/* Safari */
-webkit-transition-property:margin-left, padding-left, margin-right, padding-right;
-webkit-transition-duration:0.3s;
-webkit-transition-delay:0s;
}
.luis:hover{
/* 加阴影 */
-moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
margin-left: -17px;
padding-left: 17px;
margin-right: -27px;
padding-right: 27px;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
