精华内容
下载资源
问答
  • CSS outline 属性

    千次阅读 2021-06-13 00:37:32
    1、outline(轮廓)用于设置元素周围的一条线,用于元素边框的外围,可起到突出元素的作用。2、outline-style:值如下:值 描述none默认。定义无轮廓。dotted定义点状的轮廓。dashed定义虚线轮廓。solid定义实线轮廓。...

    1、outline(轮廓)用于设置元素周围的一条线,用于元素边框的外围,可起到突出元素的作用。

    2、outline-style:值如下:

    值                  描述

    none默认。定义无轮廓。

    dotted定义点状的轮廓。

    dashed定义虚线轮廓。

    solid定义实线轮廓。

    double定义双线轮廓。双线的宽度等同于 outline-width 的值。

    groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。

    ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。

    inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。

    outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。

    inherit规定应该从父元素继承轮廓样式的设置。

    3、示例html>

    *{

    padding: 0;

    margin: 0;

    }

    #dd{

    width: 500px;

    height: 300px;

    /*border: 5px solid darkcyan;*/

    background: darkkhaki;

    margin: 100px auto;

    padding: 50px;

    /*box-sizing  盒子尺寸*/

    box-sizing: border-box;  /*不增加box-sizing新宽高    不增加新的padding ,在原来的border大小里面设padding*/

    }

    #dd:hover{

    /*border: 5px solid darkgreen;*/

    outline: 5px solid darkgreen; /*outline 跟border一样都是写边框的,但是outline不占位置*/

    }

    13 outline盒子描边

    上面代码效果图片:

    移入前

    7f1d55ddc980944c55f6a8bfcd130503.png

    移入后

    717badb98c26f2a6cc4bcf180fd90b66.png

    展开全文
  • CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色、样式、宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用。CSS outline属性作用:是绘制于元素周围的一条线,...

    CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色、样式、宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用。

    2327c414fe0a57038e069c25eab872f7.png

    CSS outline属性

    作用:是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    outline 简写属性在一个声明中设置所有的轮廓属性。可以按顺序设置如下属性:outline-color,outline-style,outline-width。如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

    ● outline-color:规定轮廓的颜色。

    ● outline-style:规定轮廓的样式。

    ● outline-width:规定轮廓的宽度。

    说明:轮廓线不会占据空间,也不一定是矩形。

    注:所以主流浏览器都支持outline 属性;只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline 属性。

    CSS outline属性的使用示例

    php中文网(php.cn)

    div

    {

    border:red solid thin;

    outline:#00ff00 dotted thick;

    padding:10px;

    }

    测试文本!

    效果图:

    331e51ae33b97d3f7a8097b43a79f8cf.png

    以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

    展开全文
  • css的outline属性的作用是什么发布时间:2020-05-06 11:47:34来源:亿速云阅读:280作者:小新css的outline属性的作用是什么?相信有很多人都不太了解,今天小编为了让大家更加了解outline属性,所以给大家总结了...

    css的outline属性的作用是什么

    发布时间:2020-05-06 11:47:34

    来源:亿速云

    阅读:280

    作者:小新

    css的outline属性的作用是什么?相信有很多人都不太了解,今天小编为了让大家更加了解outline属性,所以给大家总结了以下内容,一起往下看吧。

    outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用。

    f0ab3eb79638fc362b9c6e1bea77870f.png

    CSS outline属性

    作用:是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    outline 简写属性在一个声明中设置所有的轮廓属性。可以按顺序设置如下属性:outline-color,outline-style,outline-width。如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

    ● outline-color:规定轮廓的颜色。

    ● outline-style:规定轮廓的样式。

    ● outline-width:规定轮廓的宽度。

    说明:轮廓线不会占据空间,也不一定是矩形。

    注:所以主流浏览器都支持outline 属性;只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline 属性。

    CSS outline属性的使用示例

    亿速云(php.cn)

    div

    {

    border:red solid thin;

    outline:#00ff00 dotted thick;

    padding:10px;

    }

    测试文本!

    效果图:

    50a8edada97795cedcd0ab1ff5869b72.png

    关于css的outline属性的作用是什么就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

    展开全文
  • 昨天在一个技术群里问关于input表单的问题,修改其边框兼容等问题,明明记得以前修改的时候IE6是不兼容的不知道,怎么的,现在写了一下都没事了,心里一阵的郁闷啊,现在记住之前写的样式,要是以后...outline:none;...

    昨天在一个技术群里问关于input表单的问题,修改其边框兼容等问题,明明记得以前修改的时候IE6是不兼容的不知道,怎么的,现在写了一下都没事了,心里一阵的郁闷啊,现在记住之前写的样式,要是以后在遇到,就要好好的研究一番了

    input{

    width:400px; height:40px; line-height:40px;

    text-indent:10px;border:0px;outline:none; }

    对于样式表里面outline的属性,我也是第一次认真的看了看,朋友一句话点到了关于outline,在这里很感谢那个朋友虽然不知道叫什么名字,但是以后有什么问题还是希望和大家多交流

    多讨论,这样梨子换桃,大家共同进步。

    废话不多说,现在就来总结一下昨天所学的关于outline属性;

    none 默认。定义无轮廓。

    dotted 定义点状的轮廓。

    dashed 定义虚线轮廓。

    solid 定义实线轮廓。

    double 定义双线轮廓。双线的宽度等同于 outline-width 的值。

    groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。

    ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。

    inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。

    outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。

    inherit 规定应该从父元素继承轮廓样式的设置。

    看到这些小仙我也试了试,毕竟看的再多都不如动手一试,在试的过程中在火狐 谷歌 以及IE10都是正常的,但是在IE6

    IE8就不行了,对此我也看到疑惑……这是为什么呢?难道是IE10一下不支持吗?

    于是乎我也度娘了下,才知道在IE里面

    只有在规定了 !DOCTYPE 时,Internet Explorer 才支持 outline-style 属性

    所以,碰到疑惑的友友们,也多多学习多多总结,咱们一起进步吧 (*^__^*) 嘻嘻……

    只是在这里小仙哪里有说错的希望友友们能纠正,小仙看到后肯定里面改正,O(∩_∩)O~~~

    展开全文
  • 效果图一 目标图 方式只需要设置 button的样式为 button{ outline:none; }
  • [css] 你用过outline属性吗?它有什么运用场景 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持...
  • 一、什么是css轮廓(outline)属性轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。举个例子来说吧:在我们平时阅读浏览器里的内容时,当鼠标点击让一个a标签链接或者一个input的...
  • outline:rgb(220,220,220,0.7) solid 5000px;
  • Unity Outline组件、QuickOutline插件的Outline脚本冲突 前提:需要修改图片的轮廓,使用unity原生Unity Outline组件, 脚本获取组件时,使用: transform.GetComponent<Outline>().OutlineColor = test...
  • 需始终在outline-color属性之前声明 outline-style 属性;元素只有获得轮廓以后才能改变其颜色。css outline-color属性怎么用?outline-color属性设置一个元素整个轮廓中可见部分的颜色。要记住,轮廓的样式不能是 ...
  • 假设有这么一个初始代码:Documentdiv {margin-left: 100px;margin-top: 100px;padding: 0;width: 200px;height: 200px;background-color: green;...}其效果如下:然后再把这个outline-offset属性的...
  • 一、什么是css轮廓(outline)属性轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。举个例子来说吧:在我们平时阅读浏览器里的内容时,当鼠标点击让一个a标签链接或者一个input的...
  • CSS简单学习 这个段落的边框和轮廓拥有不同的颜色 3.4 outline属性 outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline简写属性在一个声明中...
  • CSS :focus 伪类

    2021-08-05 03:36:19
    注释:IE 浏览器不支持此属性。说明这个伪类应用于有焦点的元素。例如 HTML中一个有文本输入焦点的输入框,其中出现了文本输入光标;也就是说,在用户开始键入时,文本会输入到这个输入框。其他元素(如超链接)也可以...
  • 经验告诉我,这是 css 的 outline 属性带来的边框,而在 chrome 控制面板里该元素的 styles 列表中并没有设置 outline 我的开发经验告诉我,这个列表中会把所有设置过的、影响到此元素的 css 样式列出来,即使是设置...
  • 在css改变单选框颜色的方法实现中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline,由于之前对其印象确实有些模糊,于是本文打算对其进行稍微深入的研究^_^Spec是这样描述...
  • 使用快捷视图本小节将介绍快捷 Outline 视图。快捷 Outline 视图是一种在原位上方弹出显示的视图,它显示在编辑器上方并很容易通过键盘来控制。另一种快捷视图将在 Type Hierarchy(类层次结构) 小节介绍 。快捷 ...
  • 转自:CSS 边框属性(Border 和 Outline属性描述CSSborder在一个声明中设置所有的边框属性。1border-bottom在一个css声明中设置所有的下边框属性。1border-bottom-color设置下边框的颜色。2border-...
  • CSS Outline(轮廓)

    2021-06-23 09:37:39
    CSS Outline(轮廓)(outline)轮廓线是在元素(例如按钮,活动表单域等)的边框边缘外部绘制的一条线,以使其突出。轮廓(Outline) VS 边框(Border)轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似,但在以下...
  • (1)outline是一个和用户体验密切相关的属性,与focus状态和键盘访问关系密切。 在访问网页的时候,如果鼠标坏了,这时候我们一般会用tab键来按次序不断focus控件元素,包括:链接、按钮、输入框等表单元素,或者...
  • 我们之前对HTML5的,的小三角样式进行了自定义,但是还有一个不容忽视的体验问题,就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。...
  • 轮廓(outline)是绘制于...轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。border:1px solid red;outline-style:dotted;outline-color:#00ff00;p {border:1px solid red;}p.dotted {outline-style:dotted;}p.das...
  • outline 这时候可以通过 outline 属性来解决: .text { width: 254px; height: 254px; background-color: #33AAE1; border: 10px solid #03D766; outline: 10px solid #BC9E9C; } 描边有一个好处在于,它跟边框类似...
  • 今天在微博看见@zhangxinxu召集各种实现了十字功能的方法。...这个属性其实很简单,就4种类型:outline-widthoutline-styleoutline-coloroutline-offsetDEMO那让我们来试一试:和border的区别那不是和border很像吗?...
  • outline和border的区别

    2021-07-30 15:12:58
    1.outline是元素触发后出现的轮廓线,有Outline-color,Outline-style等一系列属性 2.outline不占有位置,不会增加div的宽度和高度 3.outline:none;触发后就不会有轮廓线。s brder 1.占有空间(除CSS3盒子模型...
  • 轮廓(outline属性指定元素轮廓的样式、颜色和宽度。 用于显示一个view 的轮廓形状 outline 其他属性属性 说明 值 CSS outline 在一个声明中设置所有的轮廓属性 outline-color ...
  • Three.js Sprite精灵如何实现OutlinePass选中框效果? 1. 最近在项目中遇到这样一个问题,如何在3D场景中实现Sprite精灵的选中效果,简单的方法有改变材质颜色,但是感觉效果比较low,于是查了下,发现这两种不错的...
  • HTML标签属性与CSS样式

    2021-06-11 08:13:09
    定义:超文本标记语言Hypetext Markup Language特点:不需要编译,直接由浏览器执行是一个文本文件必须用htm或html作文件后缀对大小写不敏感,HTML或html都可以声明不是标签html标签的属性语法:自己的文本标签名>...
  • css常见属性

    2021-06-12 04:35:06
    outline-style、outline-width、outline-color、outline 8、页面样式属性:size、page-break-before、page-break-after 9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,109
精华内容 17,643
关键字:

outline属性