Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >border:none,border:0

border:none,border:0

作者头像
HaC
发布于 2020-12-30 09:27:51
发布于 2020-12-30 09:27:51
1.1K00
代码可运行
举报
文章被收录于专栏:HaC的技术专栏HaC的技术专栏
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--css样式-->
<style>
.a{
    border:none;        //并不是隐藏边框,只是没有边框
}
.b{
    border-style:none;  //表示无边框,即边框样式为无
    border-width:0;     //表示边框宽度为0
}
<style>

以上两个类选择器a和b是一样的效果,border:none会被解析成border-style:none和border-width:0; 边框属性有以下几种(按顺序):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
border{
border-width:1px;
border-style:solide;
border-color:red;
}

其中border-style属性值一定不可省略,否则设置了如bord:10px也无法先边框。 写法应该是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
border:1px solid red

再来看看性能的区别: border:0 浏览器对border-width,border-color进行了渲染,占用内存 border:none,浏览器不进行渲染,(代表三个属性都没有?),不占用内存。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/07/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一篇文章带你了解CSS 边框(Border)
CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式,例如实线,双线,虚线等,[也可以是图像],定义边框的样式(border-style),颜色(border-color)和厚度(border-width)。
前端进阶者
2021/02/04
6390
纯CSS绘制三角形、梯形及border属性的延伸
利用CSS实现三角形效果,比较常用的思路是使用 border 边框来实现,border 边框是由四个三角形组成的,通过调整四个边来实现不同形状的三角形。
德顺
2019/11/12
2.3K0
CSS-03
其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。
用户9615083
2022/12/25
2.1K0
CSS-03
10.7 border-width边框粗细:outline与border有什么不同?
为什么线的粗细叫宽度?边框线像马路往前冲,马路的宽度就好比是线的宽度。此外,还有stroke-width,是以后学Canvas绘制时要接触到的,是绘制的线的粗细,它们的名字是类似的。
LIYI
2020/10/26
2.5K0
10.7 border-width边框粗细:outline与border有什么不同?
全栈之前端 | 4.CSS3基础知识之盒子模型学习
描述:在 HTML 中首先会使用 CSS 来对元素进行定位,我们将学习如何使用 CSS 来控制和定位网页元素的位置、大小和布局。
全栈工程师修炼指南
2023/10/31
3150
全栈之前端 | 4.CSS3基础知识之盒子模型学习
CSS魔法堂:重拾Border之——解构Border
前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?"。本系列将稍微深入探讨一下那个貌似没什么好玩的border! 《CSS魔法堂:重拾Border之——解构Border》 《CSS魔法堂:重拾Border之——图片作边框》
^_^肥仔John
2018/01/18
1.1K0
CSS魔法堂:重拾Border之——解构Border
CSS学习笔记:边框样式,列表符号【7/27】
除了上表列出这几个,还有hidden、dotted、double等取值。不过其他取值几乎用不上,可以直接忽略。
岳泽以
2022/10/26
7560
CSS学习笔记:边框样式,列表符号【7/27】
CSS 基础
层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言
Nian糕
2018/08/21
3.2K0
CSS 基础
css的样式,选择器和框模型
派生选择器: li strong {color:red;} id 选择器: #red {color:red;} class选择器 .center {color:red;} 属性选择器 [title]{color:red;} 针对全部的带有title属性的元素 [title=W3School] {color:red;} 针对带有title属性且值为W3School的元素 [title~=hello] { color:red; } 针对带有title属性且值带有hello以并且由空格分隔的元素,如<h2 title="hello world">Hello world</h2> [title|=hello] { color:red; } 针对带有title属性且值带有hello以并且由连字符分隔的元素,如<h2 title="hello-world">Hello world</h2>
用户7962184
2020/11/20
1.4K0
css的样式,选择器和框模型
CSS学习笔记二
内边距、边框和外边距是可选参数属性,默认值:0 ;很多元素由用户代理样式表设置外边距和边框,通过将元素的 margin外边距和padding内边距设置为 0 来覆盖这些浏览器样式
Mirror王宇阳
2020/11/13
1.3K0
CSS学习笔记二
原 荐 CSS深入理解之border
作者:汪娇娇 时间:2017年10月20日 前段时间看过有关border比较好的视频,想着就写成博客给大家分享一下吧~ 说起border,想必大家都很熟悉,简单的我就不赘述了,现在来说一点深入的吧吧吧吧吧吧吧。 1、border-width为什么不支持百分比值? 先问大家一个问题,大家知道border-width为什么不支持百分比值吗?像我们所熟知的width和height啥啥啥的都支持百分比,那有没有人给border-width用过百分比?还是用过但却失效了? 和大家举个栗子,大家就知道为啥border-
jojo
2018/05/03
7230
原                    荐                                                            CSS深入理解之border
IT课程 CSS基础 024_边框、轮廓、阴影
border-top, border-right, border-bottom, border-left: 分别设置顶部、右侧、底部、左侧的边框。
zhaoJian.Net
2024/04/03
1100
IT课程 CSS基础 024_边框、轮廓、阴影
Css代码
1 1,225 views A+ 所属分类:技术 〓注意事项〓说明仅供参考,因浏览器显示差异或属性覆盖等问题可能看不到效果,具体使用请自行摸索,欢迎各位提供纠正完善,更多属性代码参考请到W3school,谢谢。 以下是通用代码(即红色部分),你可以利用它修改你想修改的区域(即下面蓝色的部分)的属性,即:区域{通用代码} *如body{font:italic bold 105% small-caps"Times New Roman",Georgia,Serif;} 记得删除类似①②③的标识。 〓字
用户1127987
2018/06/04
2K0
小白都能学会的css
css 相当于美化工具,就是在事物原有的基础上对外表进行修饰和包装,跟ps、美图秀秀等类似,只不过,css 是美化的对象是html 文本,是一个超文本标记语言。
佛系编程人
2019/10/14
6240
全栈之前端 | 10.CSS3基础知识之表单表格学习
通过本章将学习如下表单以及表格相关样式属性,您可以改变表单(input、form)或者(table)表格的样式等。
全栈工程师修炼指南
2024/01/15
2330
全栈之前端 | 10.CSS3基础知识之表单表格学习
CSS入门级学习
css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式
别先生
2017/12/29
1.4K0
CSS入门级学习
CSS基本知识(慕课网)
  1、注释     注解:CSS中注释/*这里是注释的文字*/   HTML中注释<!--这里是注释的文字-->   2、外部式css样式,写在单独的一个文件中     注解: 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码: <link href="base.css" rel="stylesheet" type="tex
听着music睡
2018/05/18
2.2K0
前端学习(12)~css学习(六):盒模型详解
但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。
Vincent-yuan
2020/03/19
8140
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
韩曙亮
2023/03/30
3.2K0
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
【CSS】:盒模型
在 CSS 中,盒模型(Box Model) 是网页布局的基础。所有 HTML 元素在浏览器中都会被当作一个矩形“盒子”来处理,而 盒模型决定了这些“盒子”的尺寸、间距和显示方式。 盒模型的组成:
Yui_
2025/02/04
700
【CSS】:盒模型
相关推荐
一篇文章带你了解CSS 边框(Border)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文