• css3-13 如何改变文本框的轮廓颜色


    css3-13 如何改变文本框的轮廓颜色

    一、总结

    一句话总结:outline使用和border很像,几乎一模一样,多了一个offset属性

    1、轮廓outline如何使用?

    使用和border很像,几乎一模一样,多了一个offset属性

    18             outline:2px dashed #00f;
    19             outline-offset:20px;

    2、轮廓outline和边框的区别是什么?

    使用和border很像,几乎一模一样,多了一个offset属性

    18             outline:2px dashed #00f;
    19             outline-offset:20px;

    3、轮廓outline的使用场景是什么?

    input单行文本框focus时候的颜色

    4、如何如何改变文本框的轮廓颜色?

    outline属性即可,使用和border很像,多了一个offset属性

    18             outline:2px dashed #00f;
    19             outline-offset:20px;

    二、轮廓outline

    1、相关知识

    轮廓样式:
    outline:2px solid #f00;
    outline-offset:15px;

     

    2、代码

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         body{
     8             padding-left:300px;
     9             padding-top:100px;
    10         }
    11         .img{
    12             width:256px;
    13             height:256px;
    14             background: #ccc;
    15             overflow: hidden;
    16             /*border-radius:256px;*/
    17             border:2px solid #f00;
    18             outline:2px dashed #00f;
    19             outline-offset:20px;
    20         }    
    21     </style>
    22     <script src="jquery.min.js"></script>
    23 </head>
    24 <body>
    25     <div class='img'>
    26         <img src="dog.png" alt="">    
    27     </div>
    28 </body>
    29 <script>
    30 </script>
    31 </html>
     
  • 相关阅读:
    python中的GIL
    centos7 安装docker
    ORACLE INSERT INTO SELECT
    Java substring几个用例
    Java Date类型转换、操作等(util.Date sql.Date,)
    ORACLE 按字段去除重复数据
    OFFICE技巧汇编
    ORACLE自动类型转换的坑
    ubuntu下,pycharm svn 版本控制,svn服务器在win下
    【草稿】pip重要命令;python 变量命名规则
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9269937.html
Copyright © 2020-2023  润新知