CSS outline轮廓线可以设置一条边么？

最新推荐文章于 2022-02-28 21:59:07 发布

weixin_33743703

最新推荐文章于 2022-02-28 21:59:07 发布

阅读量1.2k

点赞数

原文链接：https://my.oschina.net/af666/blog/874178

版权

为什么80%的码农都做不了架构师？>>>

设置元素周围的轮廓

p {
outline:#00FF00 dotted thick;
}

轮廓线不会占据空间，也不一定是矩形。

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

outline属性不可以像border一样只设置一条边。

转载于:https://my.oschina.net/af666/blog/874178

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33743703

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS outline轮廓线可以设置一条边么？

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

CSS 边框、轮廓线

corlin6688的博客

11-07

341

border-color属性用于设置边框的颜色，可以通过name（指定颜色的名称）、RGB（指定RGB值）、HEX（指定颜色的十六进制值）设定颜色。（上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed）。★ border-style:dotted solid double（上边框是 dotted，左、右边框是 solid，底边框是 double）。简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。CSS边框属性允许指定一个元素边框的样式和颜色。

教你玩转CSS 轮廓（outline）属性

孙叫兽的博客

07-21

1016

目录 CSS 轮廓（outline）所有CSS 轮廓（outline）属性 CSS 轮廓（outline）轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。所有CSS 轮廓（outline）属性 “CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。 ...

参与评论您还未登录，请先登录后发表或查看评论

css outline详解

weixin_43294560的博客

02-28

3013

使用：缩写： outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit outline: 1px dashed red; 轮廓偏移 outline-offset:npx; 和border区别：不占据空间大小，即之后的元素会覆盖，排列不会从outline结束位置开始、margin不会从outline结束位置开始不能设置单独边，总是围绕所有边根据内部元素形状而定，并

CSS 边框属性（Border 和 Outline）

icontent

11-04

332

转自：CSS 边框属性（Border 和 Outline）属性描述CSSborder在一个声明中设置所有的边框属性。1border-bottom在一个css声明中设置所有的下边框属性。1border-bottom-color设置下边框的颜色。2border-https://www.pinlue.com/article/2020/11/2016/1311355602054.html ...

CSS 控制 input 只显示下划线效果

weixin_34293902的博客

09-27

1704

由于页面设计需要，有时我们可能会出现只有下划线（底部边框）的input，如下图所示那么怎么实现这种效果呢？其实很简单，只要从边框（border）入手就可以了比如将上、右、左边框宽度设置为0，下边框为1，颜色根据需要调整 border-bottom: 1px solid #dbdbdb; border-top:0px; bo...

CSS - input 只显示下边框

最新发布

07-24

CSS 轮廓（Outline）是 CSS 中一个重要的视觉反馈机制，主要用于增强用户界面元素的可视性。它不同于传统的边框(border)，轮廓不占据布局空间，也不会覆盖页面上的其他元素。轮廓的主要作用是围绕元素绘制线条，常被...

CSS设置轮廓

weixin_49138751的博客

10-16

348

CSS设置轮廓一般情况下，我们会使用border来设置边框例如: border:red solid 10px；这时候边框的大小也会被计算到盒子的大小，会增加整个盒子的大小，把盒子外的元素挤到一边去。而轮廓呢？轮廓用outline来表示，用法与border一模一样例如 outline:red solid 10px； outline用来设置元素的轮廓线，与边框不同的是，就是轮廓不会影响到可见框的大小 ...

web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置

★★光亭★★

01-28

9945

web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置

CSS3 outline(轮廓属性)

10-05

903

CSS3 外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取...

边框(Border) 和轮廓(Outline) 属性

古月风苑

05-28

4695

border 属性缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width, border-style,和border-color. 如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。 JavaScript 语法: object object.style.border="3px solid blue" borde

table 框框

weixin_30897079的博客

10-28

一、表格的常用属性基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮边框颜色）、 bordercolordark（表格的暗边框颜色）、bgcolor（表格的背景色）、background（表格的背...

CSS系列之轮廓线outline

老__L的博客

02-05

3814

本文主要介绍CSS的outline、outline-color、outline-style、outline-width。轮廓线outline

html中outline属性,css 轮廓（outline）属性是如何使用的

weixin_39633171的博客

06-05

3235

一、什么是css轮廓(outline)属性轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。举个例子来说吧：在我们平时阅读浏览器里的内容时，当鼠标点击让一个a标签链接或者一个input的单选框获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是轮廓(outline)。在默认情况下，点击a标签，input，或者添加鼠标点击事件的时候，浏览器就会留...

border 和 outline 实现简单的缝边效果

zjuwwj的博客

02-13

1791

1. 关键知识点 2. 实现效果 3. 实现代码

css轮廓设置

课前的博客

11-06

947

轮廓（outline）是绘制于元素周围的一条线，位域边框的外围，可起到突出元素的作用。css轮廓设置用于规定元素轮廓的样式、颜色和宽度。1、设置轮廓的颜色（outline-color）值： color_name：规定颜色值为颜色名称的轮廓颜色（比如：blue） hex_number：规定颜色值为16进制值的轮廓颜色。 rgb_number：规定颜色值为rgb代码的轮廓颜色。 invert

css outline

05-31

CSS outline属性用于设置一个元素的轮廓线（outline），它与border属性有些类似，但是不同之处在于轮廓线不占用空间，并且不一定是矩形的形状。outline属性可以设置轮廓线的宽度、样式和颜色等属性，常用的属性值包括： - outline-width：轮廓线的宽度，可以使用像素值、em、rem、百分比等单位； - outline-style：轮廓线的样式，包括实线、虚线、点线等样式； - outline-color：轮廓线的颜色，可以使用颜色名称、RGB值、十六进制值等； - outline-offset：轮廓线与元素边缘之间的距离，可以使用像素值、em、rem等单位。示例代码： ```css /* 设置一个红色的实线轮廓线，宽度为2px，与元素边缘距离为5px */ outline: 2px solid red; outline-offset: 5px; ``` 需要注意的是，outline属性在某些浏览器中会存在兼容性问题，特别是在IE浏览器中，所以在使用时需要进行兼容性处理。