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、代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         body{
 8             padding-left:300px;
 9             padding-top:100px;
10         }
11         .img{
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16             /*border-radius:256px;*/
17             border:2px solid #f00;
18             outline:2px dashed #00f;
19             outline-offset:20px;
20         }    
21     </style>
22     <script src="jquery.min.js"></script>
23 </head>
24 <body>
25     <div class='img'>
26         <img src="dog.png" alt="">    
27     </div>
28 </body>
29 <script>
30 </script>
31 </html>

 

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9269937.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ios添加设备真机测试,以及Undefined symbols for architecture x86_64:''错误

问题今天坑了好久&#xff0c;然后找了各种资料 添加设备这个直接去开发者中心添加一个设备进去就好&#xff0c;具体流程百度&#xff0c;第二个问题是属于路径不对或者是静态库没有添加成功&#xff0c;项目可以看到&#xff0c;到时路径找不到&#xff0c;你把静态库拖到桌面…

linux NF NR实例,awk内建变量示例详解之NR、FNR、NF

NR表示从awk开始执行后&#xff0c;按照记录分隔符读取的数据次数&#xff0c;默认的记录分隔符为换行符&#xff0c;因此默认的就是读取的数据行数&#xff0c;NR可以理解为Number of Record的缩写。在awk处理多个输入文件的时候&#xff0c;在处理完第一个文件后&#xff0c;…

迷宫探索

/* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 1 1 4 3 */#include<iostream>using namespace std;struct node {int x;//横坐标int y;//纵坐标int f;//父亲在队列中的编号int s;//步数 };int main() {node que[2051];int a[51][51]{0};int book[51][51]{0};//定义一…

Kinect2.0获取数据

最近事情真是多&#xff0c;今天抽空研究一下Kinec2.0的数据获取&#xff01; 系统要求 https://developer.microsoft.com/en-us/windows/kinect/hardware-setup 系统环境 联想Y430P&#xff0c;Windows10 首先安装了Kinect for Windows SDK &#xff08;KinectSDK-v2.0_1409-S…

linux超级工具,linux运维超级工具--sysdig

sysdig 是一个超级系统工具,它可以用来捕获系统状态信息&#xff0c;在运维工作中sysdig能很方便的排查异常、定位故障&#xff0c;它还能保存数据进行分析&#xff0c;并且提供强大的命令接口。在了解sysdig强大之处之前,首先得安装sysdig&#xff0c;我这里是环境是centos6.7…

《sql语句练习1》

Oracle系列《一》&#xff1a;简单SQL与单行函数 使用scott/tiger用户下的emp表和dept表完成下列练习&#xff0c;表的结构说明如下 emp员工表(empno员工号/ename员工姓名/job工作/mgr上级编号/hiredate受雇日期/sal薪金/comm佣金/deptno部门编号) dept部门表(deptno部门编号…

Asp.net mvc 知多少(一)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan&#xff0c;想看英文原版的可访问http://www.dotnettricks.com/free-ebooks自行下载。该书主要分为两部分&#xff0c;ASP.NET MVC 5、ASP.NET WEB API2。本书最大的特点是以面试问答…

stm32h7能跑linux,STM32H7榨干了Cortex-M7的最后一滴血

原标题&#xff1a;STM32H7榨干了Cortex-M7的最后一滴血有个非常重磅的消息ST给自己的STM32家族又新增了一条新的产品线—— H7H 代表的是High Pefrmance之意 (此为笔者臆测)7 则表示这是基于ARM Cortex-M7架构修改而来熟悉的工程师可能会问&#xff0c;不是已经有基于M7架构的…

通过PowerShell进行网络分析

好久没有写文章&#xff0c;因为确实工作也比较忙。今天周末&#xff0c;稍微有些时间&#xff0c;在解决一个问题时&#xff0c;用到了一点抓取和处理网络数据的小技巧&#xff0c;摘录分享如下。问题描述我有一个需求&#xff0c;就是要研究某个网页加载过程中具体发起了多少…

jvm监控调优常用命令

jvm监控调优常用命令 转载于:https://www.cnblogs.com/likun10579/p/6403324.html

【BZOJ】1013 球形空间产生器

【解析】代数变形高斯消元 [分析] 依据题目以下的提示。设x[i][j]表示第i个点在第j维的坐标。r[j]为圆心在第j维的坐标 能够知道&#xff1a; dis根号(∑(x[i][j]-r[j])^2)。 因为平方的非负性。所以能够推出 dis^2∑(x[i][j]-r[j])^2。 依据平方和公式&#xff0c;(x[i][j]-r[…

c语言不规则窗口,C语言不规则数组和指针

不规则数组是每一行的列数不一样的二维数组&#xff0c;其原理如下图所示&#xff0c;图中的数组有3行&#xff0c;每行有不同的列数。在了解如何创建不规则数组之前&#xff0c;让我们先看一下用复合字面量创建的二维数组。复合字面量是一种C构造&#xff0c;前面看起来像类型…

php spl_autoload_register() 函数

spl_autoload_register()的用法&#xff1a; 其中$this表示当前类&#xff0c;autoload()是我注册的自动加载函数&#xff0c;当然这个只是一个函数名&#xff0c;只要不与php的关键字重复&#xff0c;符合一般函数名的命名规范即可。 使用自动加载之后&#xff0c;当我们在一个…

C语言中递归什么时候能够省略return引发的思考:通过内联汇编解读C语言函数return的本质...

C语言中递归什么时候能够省略return引发的思考&#xff1a;通过内联汇编解读C语言函数return的本质 事情的经过是这种&#xff0c;博主在用C写一个简单的业务时使用递归&#xff0c;因为粗心而忘了写return。结果发现返回的结果依旧是正确的。经过半小时的反汇编调试。证明了我…

C# 为什么说CM+Fody+HC是WPF开发的最强组合?

01—名词解析CM&#xff1a;Caliburn.Micro(简称CM)一经推出便备受推崇&#xff0c;作为一款MVVM开发模式的经典框架&#xff0c;越来越多的受到wpf开发者的青睐.我们看一下官方的描述&#xff1a;Caliburn是一个为Xaml平台设计的小型但功能强大的框架。Micro实现了各种UI模式&…

c语言逻辑运算符两侧运算对象,逻辑运算符两侧运算对象的数据类型是什么?...

逻辑运算符两侧运算对象的数据类型&#xff1a;可以是任何合法的类型数据&#xff1b;因为逻辑运算符两边的运算对象&#xff0c;最终都被转换成bool值(逻辑值)操作。0、null转换为false&#xff0c;而所有非零、非false、非null值转换为true&#xff1b;然后进行运算。逻辑运算…

python-list:列表-元组-字符串

列表 “列表”是一个值&#xff0c;它包含多个字构成的序列。术语“列表值”指的是列表本身&#xff08;它作为一个值&#xff0c;可以保存在变量中、传递给函数&#xff09;--&#xff1a;按下标取值、切片、for循环、用于len()以及in not in等 list [aa,bb,cc,dd]是一个简单的…

创建相似对象,就交给『工厂模式』吧

源码&#xff1a; 源代码C# 系列导航&#xff1a; 目录 定义&#xff08;Factory Pattern&#xff09;&#xff1a; 用来创建目标对象的类&#xff0c;将相似对象的创建工作统一到一个类来完成。 一、简单工厂模式&#xff1a; 代码&#xff1a; /// <summary>/// 产品枚…

《ASP.NET Core 6框架揭秘》实例演示[26]:跟踪应用接收的每一次请求

很多人可能对ASP.NET Core框架自身记录的诊断日志并不关心&#xff0c;其实这些日志对纠错排错和性能监控提供了很有用的信息。如果需要创建一个APM&#xff08;Application Performance Management&#xff09;系统来监控ASP.NET Core应用处理请求的性能及出现的异常&#xff…

C语言循环为1404的循环,考试,求大神帮忙,C语言,小弟感激不尽

若有定义语句&#xff1a;int a10; double b3.14;&#xff0c;则表达式Aab值的类型是___________。  (1)A).char B)int C) double D)float(2)若有定义语句&#xff1a;int x12,y8,z;&#xff0c;在其后执行语句z0.9x/y;&#xff0c;则z的值为___________。A)1.9 B)1 C)2 D)2.…