CSS border-width 属性

huakaiwuxing 2017-01-06

实例

设置四个边框的宽度：

p

{

border-style:solid;

border-width:15px;

}

CSS border-width 属性

属性定义及使用说明

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

实例:

border-width:thin medium thick 10px;

  • 上边框是细边框

  • 右边框是中等边框

  • 下边框是粗边框

  • 左边框是 10px 宽的边框

border-width:thin medium thick;

  • 上边框是细边框

  • 右边框和左边框是中等边框

  • 下边框是粗边框

border-width:thin medium;

  • 上边框和下边框是细边框

  • 右边框和左边框是中等边框

border-width:thin;

  • 所有4个边框都是细边框

默认值：medium
继承性：no
版本：CSS1
JavaScript 语法：object.style.borderwidth="thin thick"

CSS border-width 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-width1.04.01.01.03.5

CSS border-width 属性

属性值

值描述
thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit规定应该从父元素继承边框宽度。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

huakaiwuxing

huakaiwuxing

相关推荐

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi / 0评论 2020-08-09

Wyn Enterprise中如何转换数据类型？

在设计报表或者仪表板时，有时候从数据集获取到的数据类型和我们分析所需的类型并不匹配，不是同一种数据类型，可能会造成无法将数据正确分类或者过滤等情况。此处主要是仪表板数据集的数据类型转换。此处要注意，直接通过下拉选择调整类型可能部分情况不会生效。此时，需要使

大象从不倒下 / 0评论 2020-07-31

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass / 0评论 2020-07-19

CSS（五）- 背景与边框 - 边框圆角与阴影基础用法

本文仅仅做border的基础使用，想要深入了解的话可以戳以下几个链接，觉得作者写的很好。border:style：dotted（点）、dashed（虚线）、solid（实线）、double、其它3D. 如今只有IE8和Opera Mini不支持border

猫沙盆 / 0评论 2020-07-08

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。这里我们利用transparent的透明颜色来代替。上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？整体

猫沙盆 / 0评论 2020-07-07

你知道我们平时在CSS中写的%都是相对于谁吗？

在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现：。line-height：

云端漂移 / 0评论 2020-07-06

css 四个角

position:relative;padding:5px;height:50px;width:300px;position:absolute;content:‘‘;height:10px;width:10px;right:0;top:0;border-r

xiaohuli / 0评论 2020-06-11

用css制作三角形图标

width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;b

葉無聞 / 0评论 2020-06-09

css常用的简写技巧_css background简写、css border 简写、css font属性简写等

css样式中有很多简写方式，比如：设置背景，字体，边框，盒子等。我们都可以把css代码合并为一行，这篇文章将总结有哪些属性支持css简写。font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;d

淡风wisdon大大 / 0评论 2020-06-06

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

福叔 / 0评论 2020-06-02

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

CaiKanXP / 0评论 2020-06-02

css解决移动端1px边框问题

@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.bo

opspider / 0评论 2020-05-29

Kafka 客户端的缓存管理

Kafka 作为一个高吞吐量的消息队列，它的很多设计都体现了这一点。比如它的客户端，无论是 Producer 还是 Consumer ，都会内置一个缓存用来存储消息。这样类似于我们写文件时，并不会一次只写一个字节，而是先写到一个缓存里，然后等缓存满了，才会

guicaizhou / 0评论 2020-05-06

移动端的特殊样式

-webkit-appearance:none 清除iOS中预置的样式，如input，botton

RexLeee / 0评论 2020-05-01

css盒模型

padding：内边距，边框到内容的距离。盒子的真实宽度=height+2*padding+2*border

sdbxpjzq / 0评论 2020-04-21

scss

mixin 混合未知格式和数量的变量, 使用...@each $animal in puma, sea-slug, egret, salamander {

jiangfulai / 0评论 2020-04-11

CSS实现等边三角形

聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~将其他的三个边框给取消。你或许有个疑问？上右下左的顺序来控制四个边框，隐藏某边框就设置transparent,显示某边框就写个颜色就可以啦~比如上

buttonChan / 0评论 2020-04-10

docker 安装 rabbitmq 集群

下载。下载版本 3.8.3. docker pull rabbitmq:3.8.3

lishijian / 0评论 2020-04-09

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

jiedinghui / 0评论 2020-02-20

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

MaureenChen / 0评论 2020-02-17

CSS3

CSS3炫酷转轴展开照片列表。CSS3响应式布局项目开发

福叔 / 0评论 2020-01-29

Scope- ruby中变量的作用范围

当程序从一个class，或者module，或者method进入（退出）时，作用域就会改变，对应的3个关键字为：class module，和 def， 每一个关键字的位置就是作用域的入口。class和module的作用域于method的不同，当定义class

SoShellon / 0评论 2013-06-01

rails常用命令

数据库迁移部分：。rake db:create 依照目前的 RAILS_ENV 環境建立資料庫。rake db:rollback STEP=n 回復上N個 Migration 動作。rake db:migrate:up VERSION=2008090612

chenshuixian / 0评论 2013-06-01

浏览器缓存机制

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同

羽化大刀Chrome / 0评论 2013-05-31

css——设置圆角border-radius值为50%安卓各版本会变形

刚开始审查元素时发现border超出，以为是这个问题。后来参考文章后发现是单位问题。.cirlce.active { 　　border: 1px solid #fd6001; 　　background: #fd6001;}

MaureenChen / 0评论 2020-01-10

laravel 前端把时间戳改变为时间格式

循环输出后台从数据库查询出来的数据，@foreach <div style="border:red 1px solid;height: 100px;margin-bottom: 20px"><div style=

学习web前端 / 0评论 2020-01-06

css中如何使用border属性与display属性

border属性设置元素边框。边框3个要素如：粗细、线型、颜色。不过应用于表时除外，对于表，hidden 用于解决边框冲突。在大多数浏览器中呈现为实线。双线的宽度等于 border-width 的值。其效果取决于 border-color 的值。定义 3D

impress / 0评论 2020-01-06

inotify+rsync实现linux文件批量更新[转]

Timeout = 300通过该选项可以覆盖客户指定的IP超时时间.通过该选项可以确保rsync服务器不会永远等待一个崩溃的客户端.超时单位为秒钟,0表示没有超时定义,这也是默认值.对于匿名rsync服务器来说,一个理想的数字是600.#transfer

LutosX / 0评论 2013-07-29

企鹅日记（九）：正则表达式

正则表达式就是处理字符串的方法，它以行为单位来进行字符串的处理行为，正则表达式通过一些特殊符号的辅助，可以让用户轻易达到查找、删除、替换某特定字符串的处理程序。正则表达式基本上就是一种“表示法”，只要工具程序支持这种表示法，那么该工具程序就可以利用正则表达

ligaoyuan00 / 0评论 2013-03-31

CentOS安装sendmail及设置

sendmail是Linux下优秀的邮件系统。在不做任何设定的情况下，sendmail发出邮件的邮箱源地址形如userid@localhost.localdo，这种地址几乎会被所有的邮箱认定为SPAM或直接拒收。在CentOS下，sendmail一般默认是

swift / 0评论 2013-03-26

如何为 Mac 安装 Java？

要在 Mac OS X 上运行 Java 7，需要 64 位浏览器。在 Mac 平台上，32 位浏览器不支持 Java 7。下面的屏幕截图和说明适用于 Java 7 Update 6 。如果正在安装其他版本，请务必相应地更改版本号。示例：对于 Java 版

quanhaoH / 0评论 2013-06-17

使用httpclient必须知道的参数设置及代码写法、存在的风险

如果使用httpclient 3.1并发量比较大的项目，最好升级到httpclient4.2.3上，保证并发量大时能抗住。httpclient 4.3.3，目前还有一些bug；还是用4.2.x稳定版本吧。httpclient一天并发量在1500w左右，峰值

84457417 / 0评论 2014-07-09

web前端入门到实战：css3动画 Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜

dazhifu / 0评论 2019-12-21

web前端入门到实战：CSS box-sizing属性的正确用法

CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度

MrHaoNan / 0评论 2019-12-19

CSS盒子模型、RestCSS、浮动、定位

D：内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。

waterv / 0评论 2019-12-10

css盒子模型之边框宽度，边框颜色与边框样式

width和height只是设置盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定。如果border-width后面跟一个值，则设置的是上，右，下，左边框的宽度都是该值；如果border-width后面跟两个值，则分别设

zengni / 0评论 2019-12-03

CSS利用border绘制图性

width:10px;border-top:10px solid red;border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:10px s

sdbxpjzq / 0评论 2019-12-03

html5音频组件实现在线广播、回播

的问题，各个浏览器比如ff、chrome之类的标准也不统一，FF只支持ogv，因为是在微信里实现属于网页端，苹果和安卓系统对权限的控制是不一样的。如果想要都支持必须得在服务器端转码，得到想要操作系统支持的音频格式，这个转码是技术核心，不容易实现需要时间

markshuai / 0评论 2014-01-09

css3动画系列之animation 属性

animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：。规定需要绑定到选择器的 keyframe 的名称。默认值是 0，意味着没有动画效果。animation-timing-function 规定动画的速度

我就是停不下来 / 0评论 2014-01-16

Xcode 4.4中LLVM compiler 4.0带来的Objective-C新语法特性

今年WWDC 2012苹果全球开发者大会上，苹果针对LLVM编译器都做了重大改进，新版的Xcode 4.4中的LLVM编译器升级到了4.0，给Objective-C带来了很多令人惊喜的特性。注意，下面的语法需要下载Xcode 4.4。新方法在列出枚举内容的

shi0 / 0评论 2013-07-15

CentOS yum安装sun Java jre jdk和openjdk

在Linux下的tty终端下，安装sun jre，但是去Oracle安装，下载居然还要登录，使用cookie，没办法。（感谢网友评论留下的方法。更改名字，原文件名一堆参数，去除了吧。

88580090 / 0评论 2013-07-14

Openfire集成现有系统数据库用户

——参考该文档介绍需要配置的参数, 在conf/openfire.xml中编辑属性, 实际为在管理控制台或数据库中添加系统属性。使用office数据库中的users、groups、groupusers表替代Openfire中的ofuser、ofgroup、

tsolin / 0评论 2013-07-13

【Android开发之UI】创建一个片段

你可以把fragment看作是activity的模块化组件，它拥有自己的生命周期，接受它自己的输入事件，你也可以在运行activity的时候添加或者移除它。这节课演示怎么样使用Support Library继承Fragment类，如此你的app(应用)就能

luoj / 0评论 2013-07-08

css3动画系列之transition 属性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。注释：请始终设置transition-duration属性，否则时长为 0，就不会产生过渡效果。规定速度效果的速度曲线。-webkit

walliam / 0评论 2014-02-10

在线HTTP网站载入速度（响应时间）站长测试（检测）工具

收集各种在线HTTP网站载入速度站长测试（检测）工具。从中国多地对你提交的URL进行载入速度测试。从中国各地对你提交的主机页面发起get请求来测量载入速度。从gtmetrix测试点对你提交的URL进行非常细致的载入响应速度测试和分析，注册帐号后功能更强大。

liuuil0 / 0评论 2014-01-25

在VirtualBox中的CentOS 6.3下安装VirtualBox增强包

在VirtualBox中安装好客户操作系统之后，建议安装VirtualBox增强包，它的作用是对GuestOS的性能和可用性进行优化。GuestAddition实质上是安装在GuestOS上的一组驱动程序和应用程序。注意，很多人把下载的增强包双击之后，看到

王德成 / 0评论 2013-09-13

linux下mysql配置文件my.cnf详解

使用给定目录作为根目录。给出存放着字符集的目录。为mysqld程序指定一个存放进程ID的文件; Init-V脚本需要使用这个文件里的进程ID结束mysqld进程。在Windows环境下，如果MySQL客户与服务器是通过命名管道进行通信 的，–sock选项给

thone00 / 0评论 2013-09-09

Linux入门基础 #10：命令行文本处理工具

命令grep用以基于关键字搜索文本。$ find / -user shuangde | grep Video. -i 在搜索的时候忽略大小写。-n 显示结果所在行数。-Ax 在输出的时候包含结果所在行之后的指定行数。$ cut -d : -f 1 /etc

89291642 / 0评论 2013-09-06

Linux系统下安装rz/sz命令及使用说明

对于经常使用Linux系统的人员来说，少不了将本地的文件上传到服务器或者从服务器上下载文件到本地，rz / sz命令很方便的帮我们实现了这个功能，但是很多Linux初始并没有这两个命令。今天，我们就简单的讲解一下如何安装和使用rz、sz命令。执行该命令后，

vanturman / 0评论 2014-12-08

Centos 7 systemctl 命令

systemctl 是系统服务管理器命令，它实际上将 service 和 chkconfig 这两个命令组合到一起。显示所有已启动的服务。下面以nfs服务为例：。开启防火墙22端口。如果仍然有问题，就可能是SELinux导致的。彻底关闭防火墙：

AlvinPanda / 0评论 2015-02-22