标签：个值 边框 输入框 radius 自带 左下 border

我们在用html用input标签写输入框的时候，在页面呈现的是一个有线条的四边形边框。
因为在很多页面中，为了增加输入框的美感性，常常我们会使用css对边框的样式进行更改，比如将四边形边框改变为圆角边框。我们常常会采用border-radius来给边框定义弧度值来改变边框样式。

border-radius：值1；表示四条边取同样的弧度值。 border-radius：值1 值2；第1个值是左上和右下、第2个值是左下和右上。 border-radius：值1 值2 值3；第1个值是左上、第2个值是左下和右上、第3个值是右下。 border-radius：值1 值2 值3 值4；第1个值是左上、第2个值是右上、第3个值是右下、第4个值是左下。 在设置完成输入框后，我们在页面点击输入框时，会发现除了有圆角边框外，原有的四边形边框也会显示出来。该情况其实是显示的边框的自带颜色。这种情况的出现会大大降低用户体验。 因此，查询资料发现只需要一句代码就能够实现取消。 我们在css中添加样式的时候，对input添加outline:none即可。该条代码能够取消输入框自带的颜色，在我们重新点击后，不会再次出现上述情况。 如果有需要取消边框的，可以添加outline:0px；。 同时我们也可以给input设定宽高来改变边框的大小。

标签：个值,边框,输入框,radius,自带,左下,border
来源： https://www.cnblogs.com/wangyao-bky/p/11832056.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。