为了账号安全,请及时绑定邮箱和手机立即绑定

如果要用 border-radius设置圆角改怎么做啊。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>导航菜单</title>

<style type="text/css">

*{margin:0; padding:0; font-size:14px;}

ul{ list-style:none;}

a{color:#333;text-decoration:none}

.nav li{ float:left;}

.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}


.nav li a.on, .nav li a:hover{ border-radius:10px 10px 0px 0px; background-color:#F60;color:#fff;}

</style>

</head>

<body>


<ul class="nav">

    <li><a href="#">首  页</a></li>

    <li><a href="#">新闻快讯</a></li>

    <li><a href="#">产品展示</a></li>

    <li><a href="#">售后服务</a></li>

    <li><a href="#">联系我们</a></li>

  </ul>


</body>

</html>

我试了一下没有反应,是为什么,,,,,,

正在回答

6 回答

这样应该可以吧,我试了一下。

.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px; border-radius:10px 10px 0px 0px; }

0 回复 有任何疑惑可以回复我~

border-radius需要考虑浏览器的兼容性,你可以使用chrome浏览器。

我用你的代码在chrome上可以显示效果。

希望可以采纳。^-^

0 回复 有任何疑惑可以回复我~

        border-top-left-radius: 10px;

        border-top-right-radius: 10px;

分别将左上、右上设置弧度

0 回复 有任何疑惑可以回复我~

你这代码是对的

0 回复 有任何疑惑可以回复我~

试验了一下你的代码,在hover的时候是有圆角效果的啊?您说的反应是不是没有在首页的<a>中定义class="on"?

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

如果要用 border-radius设置圆角改怎么做啊。。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信