本篇文章给大家分享的是有关CSS怎么将输入框设置为圆形，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。方法：1、给输入框元素添加“width:直
本篇文章给大家分享的是有关CSS怎么将输入框设置为圆形，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
方法：1、给输入框元素添加“width:直径值;height:直径值;”样式，将输入框设置为正方形；2、利用“border-radius”属性将正方形输入框设置为圆形，只需要给输入框添加“border-radius:100%;”样式即可。
本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。
css怎么将输入框设置为圆形
在css中可以先将输入框设置为正方形然后设置输入框的圆角就可以将输入框设置为圆形了。
这时就需要用到border-radius属性，该属性的作用是设置元素的圆角边框。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta Http-equiv="X-UA-Compatible" content="ie=edge" />
<title>123</title>
<style type="text/css">
.myinput{
width:100px;
height:100px;
border-radius:100%;
}
</style>
</head>
<body>
<input type="text" value="" class="myinput" placeholder="这是一个input"/>
</body>
</html>输出结果：
以上就是css怎么将输入框设置为圆形，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网html频道。
--结束END--
本文标题: css怎么将输入框设置为圆形
本文链接: https://www.lsjlt.com/news/87184.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0