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 ABC 070 B、C、D

    B - Two Switches Time limit : 2sec / Memory limit : 256MB Score : 200 points Problem Statement Alice ...

  2. mv---移动文件或目录

    mv命令用来对文件或目录重新命名,或者将文件从一个目录移到另一个目录中.source表示源文件或目录,target表示目标文件或目录.如果将一个文件移到一个已经存在的目标文件中,则目标文件的内容将被覆 ...

  3. 谈一谈Nginx的强大

    什么是Nginx? Nginx是一款高性能,开源的,支持高并发而轻量级的Web服务器,同时也是具有反向代理服务器及电子邮件(IMAP/POP3)的代理服务器. 基于REST架构风格,并且以统一资源描述 ...

  4. QQ亿级日活跃业务后台核心技术揭秘

    http://ms.csdn.net/geek/75478 引言 作为本次技术开放日后台架构专场的出品人我今天给大家带来<构造高可靠海量用户服务-SNG数亿级日活跃业务后台核心技术揭秘>, ...

  5. poj3244(公式题)

    Difference between Triplets Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2476   Acce ...

  6. 27.Node.js模块系统

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模 ...

  7. bind()和trigger()额外数据

    $(function(){ $('input').click(function(e,data1,data2,data3,data4){ alert(data1 + '|' + data2 + '|' ...

  8. cf1051F. The Shortest Statement(最短路/dfs树)

    You are given a weighed undirected connected graph, consisting of nn vertices and mm edges. You shou ...

  9. Python数据类型中的字符串类型

    1.换行字符:\n print ('I love python.\nAnd you?') 2.转义字符(\):\\ print ('\\\n\\') 3.制表字符(对齐表格的各列):\t print ...

  10. 洛谷 P1223 排队接水

    洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...