css3-13 如何改变文本框的轮廓颜色
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 如何改变文本框的轮廓颜色的更多相关文章
- JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色
在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...
- iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮
一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...
- 使用CSS3改变文本选中的默认颜色——张鑫旭
关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...
- JS练习 改变文本框状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3全览_文本+视觉+盒子+背景颜色
CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...
- jquery改变文本框颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用CSS3改变文本选中的默认颜色
::selection { background:#d3d3d3; color:#555; } ::-moz-selection { background:#d3d3d3; color:#555; } ...
随机推荐
- Atcoder ABC 070 B、C、D
B - Two Switches Time limit : 2sec / Memory limit : 256MB Score : 200 points Problem Statement Alice ...
- mv---移动文件或目录
mv命令用来对文件或目录重新命名,或者将文件从一个目录移到另一个目录中.source表示源文件或目录,target表示目标文件或目录.如果将一个文件移到一个已经存在的目标文件中,则目标文件的内容将被覆 ...
- 谈一谈Nginx的强大
什么是Nginx? Nginx是一款高性能,开源的,支持高并发而轻量级的Web服务器,同时也是具有反向代理服务器及电子邮件(IMAP/POP3)的代理服务器. 基于REST架构风格,并且以统一资源描述 ...
- QQ亿级日活跃业务后台核心技术揭秘
http://ms.csdn.net/geek/75478 引言 作为本次技术开放日后台架构专场的出品人我今天给大家带来<构造高可靠海量用户服务-SNG数亿级日活跃业务后台核心技术揭秘>, ...
- poj3244(公式题)
Difference between Triplets Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 2476 Acce ...
- 27.Node.js模块系统
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模 ...
- bind()和trigger()额外数据
$(function(){ $('input').click(function(e,data1,data2,data3,data4){ alert(data1 + '|' + data2 + '|' ...
- cf1051F. The Shortest Statement(最短路/dfs树)
You are given a weighed undirected connected graph, consisting of nn vertices and mm edges. You shou ...
- Python数据类型中的字符串类型
1.换行字符:\n print ('I love python.\nAnd you?') 2.转义字符(\):\\ print ('\\\n\\') 3.制表字符(对齐表格的各列):\t print ...
- 洛谷 P1223 排队接水
洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...