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. 关于IDEA编译器在初次使用thymeleaf 引入无效 , 导致th无法使用的原因

    首先pom.xml里面要导入thymeleaf的依赖 然后在html中加入  xmlns:th="http://www.thymeleaf.org" 最后点击file ---> ...

  2. PHP截取字符串长度

    <?php function str_cut($string, $start=0,$length, $dot = '..') {    $strlen = strlen($string);    ...

  3. 阿里云 CentOS7.4 环境安装nginx

    下载 nginx地址: http://nginx.org/en/download.html Mainline version可以理解为开发版本 Stable version 稳定版 Legacy ve ...

  4. 分析深圳电信的新型HTTP劫持方式

    昨天深圳下了一天的暴雨,2014年的雨水真是够多的. 用户的资源就是金钱,怎的也要好好利用嘛不是? ISP的劫持手段真是花样百出.从曾经的DNS(污染)劫持到后来的共享检測.无不通过劫持正常的请求来达 ...

  5. heap-adb shell查看堆栈使用

    今天在使用eclipse中的heap查看oom的时候,发现手机(eng版本)非常的卡,后来换成usr版本,又连接不上eclipse.最后听别人说,可以使用adb shell进行查看.指令如下 adb ...

  6. 深入了解Linux远程桌面

    本文转载于:http://www.linux521.com/2009/system/201004/11001.html 已发表在<网管员世界>2010年3月杂志             本 ...

  7. Android HttpLoggingInterceptor的用法简介

    该拦截器用于记录应用中的网络请求的信息. 示例 OkHttpClient client = new OkHttpClient(); HttpLoggingInterceptor logging = n ...

  8. ByteUtils

    package sort.bing.com; import java.io.ByteArrayOutputStream;import java.io.DataOutputStream;import j ...

  9. Windows下多个Mysql实例配置主从

    序:     网上有很多类似的文章,也是各种百度出来的,但是对于多数刚开始接触MYSQL主从的小白来说,网上文章的代码里面很多技术点都没有理解,有跌打误撞碰上的,但多数都是这篇文章卡主了,换篇文章接着 ...

  10. 循环体（for/while）循环变量的设置

    1. 求滑动(移动)平均(moving average) double partialSum = 0; for (int i = 0; i < M-1; ++i) partialSum += A ...