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. Atcoder AGC 019 A,B

    A - Ice Tea Store Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement You' ...

  2. 一个简易版的Angular js 三层 示例

    var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...

  3. 使用spring-boot 国际化配置所碰到的乱码问题

    写好html静态页面 ,  也加上了编码格式 , 获取国际化展示在浏览器中还是存在乱码 , 开始以为是浏览器编码格式问题 , 做过处理后任没有得到解决 , 具体的处理方案如下: <meta ht ...

  4. 洛谷——P3178 [HAOI2015]树上操作

    https://www.luogu.org/problem/show?pid=3178#sub 题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 ...

  5. Swift视频教程,Swift千人学iOS开发编程语言

    此时大家站在同一起跑线.Swift语言将将是下一个风靡程序猿界的编程语言,是否能抢占先机,近在咫尺. 本期推荐Swift编程语言视频教程,内容包含:开发环境基本使用.数据类型和常量.数据自己主动检查和 ...

  6. Tomcat之——配置项目有虚拟路径

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47024863 非常easy,在Tomcat的Server.xml文件里的Host节 ...

  7. PHP 版本简单记录

    PHP 版本简单记录 PHP 博物馆         http://museum.php.net/php5/ PHP 版本发布       https://secure.php.net/release ...

  8. softInputMode- 软件盘的设置

    今天遇到一个问题,就是软件盘弹出来以后,会把之前的布局界面整个的挤到屏幕的外面,而且按下返回建以后,这个软件盘占据的空间会留下一个黑色的背景.在网上查找了很多的方法,刚开始都是说,如下方法 <a ...

  9. actionmode-ActionMode以及它的menu使用

    下图左边效果为Context Menu右边效果为ActionMode. ActionMode 其实就是替换在actionbar的位置上显示的一个控件.它跟actionbar一样,也是一种导航作用.只不 ...

  10. 28.Node.js 函数和匿名函数

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...