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. 今日SGU 5.10

    SGU 168 题意:从a矩阵求出b矩阵,规则直接看题目就行了,不好打字说明 收获:dp #include<bits/stdc++.h> #define de(x) cout<< ...

  2. 在web开发中你不得不注意的安全验证问题#2-XSS

    前言 XSS又叫CSS (Cross Site Script) ,跨站脚本攻击. 恶意攻击者往Web页面里插入恶意html代码.当用户浏览该页之时,嵌入当中Web里面的html代码会被运行,从而达到恶 ...

  3. VmWare 与 宿主主机通信 STEP BY STEP (适用于刚開始学习的人)

    基本原理 在虚拟机中有三种通信方式,例如以下图所看到的 1. Bridged(桥接模式) 在桥接模式下,VMware虚拟出来的操作系统就像是局域网中的一独立的主机,它能够訪问网内不论什么一台机器只是你 ...

  4. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 托管代码（.NET）

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览  托管代码(.NET)         在SP2010中,微软提 ...

  5. C语言之文件操作06——写数据到文本文件遇0停止

    //文件 /* =============================================================== 题目:输入10个篮球运动员的身高数据(cm)保存至D盘文 ...

  6. javascript类型系统之基本数据类型与包装类型

    javascript的数据类型可以分为两种:原始类型和引用类型 原始类型也称为基本类型或简单类型,因为其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈(stack)中(按值访问) ...

  7. natapp解决Invalid Host header的问题

    最近在做一个微信公众号项目,用微信开发工具调试本地项目,需要做一下内网穿透,代理都配置好了,页面出现这个Invalid Host header错误,内网穿透工具我是用的frps做的,最后通过googl ...

  8. Elasticsearch入门系列~通过Java一系列操作Elasticsearch

    Elasticsearch索引的创建.数据的增删该查操作 上一章节已经在Linux系统上安装Elasticsearch并且可以外网访问,这节主要通过Java代码操作Elasticsearch 1.创建 ...

  9. Hi35xx NVR GDB调试

    Hi35xx NVR GDB调试   1． 下载gdb源代码 嵌入式Linux 的GDB 调试环境由Host 和Target 两部分组成,Host 端使用arm-linuxgdb,Target Boa ...

  10. mIsFunui-判断Funui方法

    1.有时候我们根据自己的需要,修改了frameword下的代码,但是,我们又不希望影响第三方,这时候我们就可以在修改处添加一个我们自己的标志位,如,mIsFunui 它是定义在我们自定义的theme里 ...