outline的用法，outline和border的区别

最新推荐文章于 2024-02-08 21:19:06 发布
最新推荐文章于 2024-02-08 21:19:06 发布
阅读量1k 收藏
点赞数
分类专栏： css 文章标签： 前端 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjq11111/article/details/121109682
版权

个人理解：

border：无论在box-size：border-box的情况下；还是在bo'x-size：content-box的情况下，border都会占据一定的大小

outline：outline表现形式和border差不多，都有边框的意味，不同的是outline不会占据元素内容大小

outline用法 ，三个值

outline ：1.边框宽度，2边框风格（内容和border-style差不多），3.边框颜色

外围前端吴彦祖
关注
专栏目录
CSS border边框（理解网页边框制作）
百赢出品，必属精品
04-25 5432
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
CSS 边框属性（Border 和 Outline）
icontent
11-04 336
转自：CSS 边框属性（Border 和 Outline）属性描述CSSborder在一个声明中设置所有的边框属性。1border-bottom在一个css声明中设置所有的下边框属性。1border-bottom-color设置下边框的颜色。2border-https://www.pinlue.com/article/2020/11/2016/1311355602054.html ...
outline和他娘亲border两三事
weixin_34310785的博客
11-04 326
outline是啥？ outline顾英文名思义就是元素的轮廓，其实一般我们很少去设置元素的outline样式，因此很多人对他不太了解。浏览器默认给很多特定元素的某些行为加上了outline样式，比如a标签、input输入框等。当你用键盘tab键选中这些元素时候都会有一个外边框方便键盘侠操作。我以前一度以为outline这种样式只存在于表...
outline和border的区别
Elna_99的博客
03-31 3045
outline和border显示效果类似。两者的区别是， 1、outline不占用网页布局空间。他是一种动态样式，只有在元素获得焦点或者被激活的时候呈现效果，突出元素的作用。border是盒模型的一部分。 2、outline创建的轮廓线四边都必须是一样的，而border可以不同。outline的外轮廓线必须闭合，不可以只设置一边。 3、outline创建的轮廓线可以向内扩展（将outline
【我不熟悉的css】outline和border的区别
qq_17335549的博客
10-27 782
【我不熟悉的css】outline和border的区别
使用CSS实现outline切换的动画效果
09-25
在提供的标签中，“CSS outline”是指CSS中的`outline`属性，用于设置元素的轮廓，不同于边框（border），轮廓不占据空间，且可以是虚线、实线或其他形状，颜色和宽度也可以自由设定。 部分内容中提到了一个名为`...
利用CSS3实现圆角的outline效果的教程
09-25
【CSS3 Outline】 在网页设计中，CSS3的outline属性是一个非常实用的工具，它允许我们在元素周围创建非矩形边框，而不会影响元素的尺寸或布局...在设计时，应根据目标用户的浏览器偏好来权衡使用`outline`和`border`。
解决hover生成border造成的元素移动方法
12-14
4. **使用 `outline`**：`outline` 与 `border` 类似，但它不占据任何空间，也不影响元素尺寸，因此也是解决此问题的一个选择。 ```css .test:hover { outline: 5px solid black; /* 使用 outline 创建边框效果 *...
CSS教程:text-indent隐藏文字出现虚线框outline
09-27
总的来说，理解和适当地使用CSS的`text-indent`和`outline`属性是构建跨浏览器兼容的网页的关键。在处理隐藏文字时，要留意不同浏览器的解析差异，并确保在优化视觉效果的同时，不牺牲用户体验和网页的可访问性。...
【 CSS 边框和轮廓属性 Border&Outline】
Hey_Coder
12-04 2783
CSS 边框属性 （Border 和 Outline） 边框属性须知 1.样式最优先 设置任何边框属性，必须先设置边框样式 先 声明 border-style 属性。 元素只有在获得边框之后，才能改变其边框的宽度。 主要内容 边框宽度 边框颜色 边框样式 边框圆角 边框图像 边框阴影 轮廓 所有边框属性 IE7- 不支持值 “inherit”。 边框颜色 IE6-...
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
★★光亭★★
01-28 9983
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
css系列-border，outline
前端蜗牛君
11-27 352
边框设计 #样式选择 类型 描述 none 定义无边框。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border...
cadence allegro 17.2 design outline的使用问题
热门推荐
GY-赵的博客
03-12 1万+
17.2中使用designe outline 代替outline，放置电路板外观，及Design Outline，这个和17.2之前的版本不一样，不能使用画线的方式添加Designe Outline，因为画线时在Board Geometry类中并未能找到Design Outline或Cutout子类。只能通过添加shape的方式添加。当使用outline时，会提示你推荐优先使用de......
Allegro中几个常用层的含义
路过的Blog
03-02 3941
Allegro几个常用层的一些粗浅说明
css笔记
weixin_46393349的博客
04-27 110
一、CSS简介 1、什么是CSS css：Cascading Style Sheet 是一组样式设置规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> ...
CSS笔记
weixin_46396624的博客
04-21 195
一、CSS简介 1.什么是CSS css： Cascading Style Sheet层叠样式表 是一组样式设置规则，用于控制页面的外观样式 2.为什么使用CSS 实习内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3. CSS作用 页面外观美化 布局和定位 二、基本用法 1. CSS语法 <head> <style&g...
outline使用方法,outline与border的区别
weixin_34199335的博客
10-25 841
2019独角兽企业重金招聘Python工程师标准>>> ...
【原理图PCB专题】Cadence17.4版本新增加的Cutout和Design_Outline层有什么用？
最新发布
一点硬件
02-08 1001
以前只需要一层Outline就能定义板框，但Cadence17.4版本新增加的Cutout和Design_Outline层，这两层的作用是什么？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值