老师,这个input选择器中border:none;和outline:none;的区别在哪?

老师,这个input选择器中border:none;和outline:none;的区别在哪?

input{

border: none;

border-bottom: solid;

outline: none;

}


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学,你好!可以看一下下面的例子,虚线的就是outline,实线的就是border,outline在border的外面。

http://img1.sycdn.imooc.com//climg/5d5772b90001e96501970045.jpg

代码如下,可以运行一下看看:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    input{
    /*border的样式*/
      border: solid 5px blue; 
     /*outline的样式*/
      outline:dotted 2px orange;
    }
</style>
</head>
<body>
<br/>
  <form>
 
  &nbsp;&nbsp;<input type="text" name="username">
  </form>
</body>
</html>

设置outline和border都为none就是分别去掉了他们的样式

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师