css中，腰圆边框怎么实现？

发布于
2017-06-01

如何实现下面的效果?

阅读 3.8k

5 个回答

AlfieriChou

发布于
2017-06-01

更新于
2017-06-01

✓ 已被采纳

1.我先贴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腰圆</title>
    <style type="text/css">
        #btn{
            width: 40px;
            height: 80px;
            background: green;
            border: 1px solid #000;
            border-radius: 40px;
        }
    </style>
</head>
<body>
    <div id="btn"></div>
</body>
</html>

2.实现后截图
图片描述

3.思路就是你那个小的边的像素，然后border-raduis的像素就是那个值。

莫若不闻

发布于
2017-06-01

css属性border-radius 的值是宽度的一半就可以了

发布于
2017-06-01

昵称不能随便取

发布于
2017-06-01

css中border-radius属性，详见CSS3 border-radius属性

生峰狼牙人

发布于
2017-06-02

看下张鑫旭大神的文章你会更加强大

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题