美文网首页web前端学员笔记
解决搜索框 border-radius出现多余边框的问题

解决搜索框 border-radius出现多余边框的问题

作者: 码农也会修真 | 来源:发表于2019-06-05 16:58 被阅读16次
代码:<input type="text" placeholder="报价结果将发送到您的手机">  //样式

input{                     //样式
width: 300px;
height: 40px;
outline: none;
border-radius: 10px;
text-indent: 1em;
}
图一

看图一border-radius后出现了问题。


图二

去网页看检查发现原来多了一像素的边框 (看图二)

看到这就有点眉目了把边框设置一下就好了看下方代码

input{
width: 300px;
height: 40px;
outline: none;
border-radius: 10px;
text-indent: 1em;
border: 1px solid #777;   
}

小二上效果图 好嘞客官来嘞。


图片3.png

此时此刻我想吟诗一首
今天天气真的好,
戴上墨镜看太阳。
看太阳啊看太阳,
是谁敲门这么狂,
原来是我外卖到。

好诗好诗 告辞我家饭想我了有缘再见。

相关文章

  • 解决搜索框 border-radius出现多余边框的问题

    看图一border-radius后出现了问题。 去网页看检查发现原来多了一像素的边框 (看图二) 看到这就有点...

  • felx布局商品列表界面

    图片展示flexbox布局搜索框问题1.gif 问题一:如何去掉搜索框自带的边框线: html:

  • css3新特性

    1.边框 使用css,可以创建新的圆角边框(border-radius),添加阴影框(box-shadow),图片...

  • 项目持续学习系列(更新)

    搜索框要用到的知识: 编辑框和键盘 安装apk时出现错误 关于Apk安装失败问题的解决方法 android真机安装...

  • CSS3

    边框 border-radius - 圆角边框 box-shadow - 边框阴影 border-image - ...

  • css

    边框 border-radius ---边框倒角 box-shadow ----边框阴影 border-imag...

  • CSS3简明教程之边框

    第2章 边框 圆角效果 border-radius border-radius是向样式添加圆角边框,使用方法: 不...

  • 文本输入框虽小,其中的测试学问你知道吗?

    在测试过程中经常会遇到文本框和搜索框的问题,搜索框与文本框最容易出现的几个问题做下总结。 搜索框内特殊信息导致Ap...

  • CSS3边框

    圆角边框border-radius border-radius属性值的4种写法1、border-radius设置1...

  • 前端培训机构—css源码笔记(三)

    一、边框拓展 设置边框圆角 border-radius 边框折叠 border-collapse: collaps...

网友评论

    本文标题:解决搜索框 border-radius出现多余边框的问题

    本文链接:https://www.haomeiwen.com/subject/dsdsxctx.html