css怎么将输入框设置为圆形

本篇文章给大家分享的是有关css怎么将输入框设置为圆形，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有迁安免费网站建设让你可以放心的选择与我们合作。

方法：1、给输入框元素添加“width:直径值;height:直径值;”样式，将输入框设置为正方形；2、利用“border-radius”属性将正方形输入框设置为圆形，只需要给输入框添加“border-radius:100%;”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css怎么将输入框设置为圆形

在css中可以先将输入框设置为正方形然后设置输入框的圆角就可以将输入框设置为圆形了。

这时就需要用到border-radius属性，该属性的作用是设置元素的圆角边框。

示例如下：

  
    
    
    
    
    
    .myinput{
        width:100px;
        height:100px;
        border-radius:100%;
    }

  
  

  

输出结果：

以上就是css怎么将输入框设置为圆形，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。