怎么让div边框斜角展示?
作者:温州网站建设   发布时间:2016-11-07  浏览:

 

怎么让div边框斜角展示?下面是我的一个案例,大家直接复制修改里面的代码元素就可以了。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>斜角边框</title>

<style>

 #menu{

  width:9em;

  margin:0 auto;

  font-family:Arial;

  font-size:14px;

  border:1px solid #AAA;

 }

/*——————设置斜角边框代码———————*/

 

 #menu a,#menu a:visited{

  display:block;

  text-decoration:none;

  color:#000;

  height:1.4em;

  border:0.5em solid #FFF;

 }

/*——————鼠标放到链接上面的背景代码———————*/

 #menu a:hover{

  color:#FFF;

  background-color:#AAA;

  border-color:#DDD #AAA;

 }

</style>

</head>

 

<body>

 <div id="menu">

  <a href="#">Home</a>

  <a href="#">Contact us</a>

  <a href="#">Web Des</a>

  <a href="#">Web Dev</a>

  <a href="#">Map</a>

 </div>

</body>

下面是效果图预览:

斜角变宽效果图制作

 

分享到:QQ空间新浪微博腾讯微博人人网微信
产品服务

欣网网络的小伙伴们随时为您待命