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、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         body{

             padding-left:300px;

             padding-top:100px;

         }

         .img{

             width:256px;

             height:256px;

             background: #ccc;

             overflow: hidden;

             /*border-radius:256px;*/

             border:2px solid #f00;

             outline:2px dashed #00f;

             outline-offset:20px;

         }

     </style>

     <script src="jquery.min.js"></script>

 </head>

 <body>

     <div class='img'>

         <img src="dog.png" alt="">

     </div>

 </body>

 <script>

 </script>

 </html>
 

css3-13 如何改变文本框的轮廓颜色的更多相关文章

  1. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  2. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  3. C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色

    在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...

  4. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  5. 使用CSS3改变文本选中的默认颜色——张鑫旭

    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...

  6. JS练习 改变文本框状态

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS3全览_文本+视觉+盒子+背景颜色

    CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...

  8. jquery改变文本框颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 使用CSS3改变文本选中的默认颜色

    ::selection { background:#d3d3d3; color:#555; } ::-moz-selection { background:#d3d3d3; color:#555; } ...

随机推荐

  1. qrcode length overflow 生成二维码网址长度溢出解决办法

    QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canva ...

  2. JavaScript全讲-架构原则解析

    因为近期一直在忙,非常久没有更新,见谅. 上篇我们讲完JavaScript函数式编程的特性,今天我们就来聊聊JavaScript中的架构. 提到JavaScript架构.非常多人会认为不可思议,由于架 ...

  3. js---25桥模式

    桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法.通过“桥”把彼此联系起来,同时又允许他们各自独立变化. 主要作用表现为将抽象与其实现隔离开来,以便二者独立化. <!DOCT ...

  4. layoutParams-动态更改某个控件的margin

    其实它的方法也非常的简单,如下 LinearLayout.LayoutParams layoutParams = (LayoutParams) bt1.getLayoutParams(); int a ...

  5. 用djbdns为域名解析服务护航

      上期回顾:http://chenguang.blog.51cto.com/350944/292195       650) this.width=650;" alt="&quo ...

  6. 将二级目录下的文件合并成一个文件的Python小脚本

    这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) #coding:utf8 import sys, os def process(path): new_fi ...

  7. 【2017"百度之星"程序设计大赛 - 初赛（A）】数据分割

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6109 [题意] 在这里写题意 [题解] 要处理的关系越多,肯定就越容易错. ->单调性. 根据这个 ...

  8. CentOS 6 IPv6 关闭方法

    http://www.linuxidc.com/Linux/2012-06/63642.htm http://blog.csdn.net/ccscu/article/details/7814028

  9. thinkphp 整合 swiftmailer 实现邮件发送

    thinkphp swiftmailer(phpmailer) 文件夹结构 图 1 swiftmailer-phpmailer 将swiftmailer整合到thinkphp中.如上图 1 我下载的版 ...

  10. android对话框(Dialog)的使用方法

    Activities提供了一种方便管理的创建.保存.回复的对话框机制.比如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...