html5input输入框设置无边框_HTML 中的 box-border 盒子边框详解

本文详细介绍了CSS3中如何设置盒子边框,包括边框的样式(如实线、虚线)、宽度和颜色。通过border属性,可以一次性设置边框的三个要素,也可以分别针对每个边进行详细设置。此外,还展示了如何利用边框创建三角形的效果。了解这些技巧,能帮助开发者更精细地控制网页元素的外观。
摘要由CSDN通过智能技术生成

border 盒子边框

复合属性。设置对象边框的特性。

盒子边框三要素:

① 边框粗细

② 边框样式

③ 边框颜色

语法:border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色,以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的,如果不指定颜色,默认颜色为黑色,但必须为盒子指定宽高。

初始 HTML

                  Document            

边框样式

使用 border-style 可为盒子边框设置样式,以下示例为实线

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;  }

效果:

f8e7f72da6549e94f372c194d34488cc.png
可单独针对某一方向设置边框样式

示例 CSS 代码

  • 上边:border-top-style: double; (双线)
  • 右边:border-right-style: solid; (实线)
  • 下边:border-bottom-style: dashed; (虚线)
  • 左边:border-left-style: dotted; (点线)
border-style 说明
  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0,本属性将失去作用。

如果需要设置不同方向的样式属性,可以写在一句 CSS 代码里,比如说下面这段代码,上下实线,左右虚线。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid dashed; }

效果:

2d8c6cc36f1961362cc6b8e252e16661.png
border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓


边框粗细

使用 border-width 可为盒子边框设置粗细,以下示例边框为 5px 粗细

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width: 5px; }

效果

6afd6c1aaede876fa4ab23ecbe037e86.png
可单独针对某一方向设置边框粗细

示例 CSS 代码

  • 上边:border-top-width: 10px; (双线)
  • 右边:border-right-width: 10px; (实线)
  • 下边:border-bottom-width: 10px; (虚线)
  • 左边:border-left-width: 10px; (点线)
border-width 说明
  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-style设置为none或hidden,border-width的使用值将为0。

如果需要设置不同方向的边框粗细,可以写在一句 CSS 代码里。

比如说下面这段代码,上下2px,右2px,左5px。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width:2px 2px 2px 5px; }

效果:

9743b5cce1fd2fdc17b60de590d3b862.png

边框颜色

可直接输入

颜色的英文名称

rgb值

十六进制

使用 border-color 可为盒子边框设置颜色,以下示例边框颜色为红色。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width:2px 2px 2px 5px;     border-color: red; }

效果:

99f1b534b61a030ce0607682d17585d1.png
可单独针对某一方向设置边框颜色

示例 CSS 代码

  • 上边:border-top-color: 10px;
  • 右边:border-right-color: 10px;
  • 下边:border-bottom-color: 10px;
  • 左边:border-left-color: 10px;
border-color 说明
  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0或border-style设置为none,本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性,border-color 也是相同使用方法,此处就不做示例了。


border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色,那么你可以将他们的样式表写在同一行代码里。

例如:

 /* CSS代码 */ div{     border-top: 5px solid red; }

这段代码指定了上边框的三个属性:粗细、样式、颜色

border-top 包含了:

  • border-top-width: 5px;
  • border-top-style: solid;
  • border-top-color: red;

其他同理


教你用 CSS 画个三角形

先来看一个示例

 /* CSS代码 */ div{     width: 100px;     height: 100px;     border-top: 50px solid red;     border-right: 50px solid blue;     border-bottom: 50px solid green;     border-left: 50px solid pink; }

效果:

14ddf5b48a93af3be86ed4479419025f.png

细心的你,一定发现了 border 的边框四条边交接处是斜角。

此刻我们把盒子的宽高设置为 0

 /* CSS代码 */ div{     width: 0;     height: 0;     border-top: 50px solid red;     border-right: 50px solid blue;     border-bottom: 50px solid green;     border-left: 50px solid pink; }

效果:

af787c3c7184a0ec252e30cfa77886ca.png

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来,它不就是一个三角形了。

为 border-color 指定 transparent 值,使盒子边框颜色变透明

 /* CSS代码 */ div{     width: 0;     height: 0;     border-top: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid green;     border-left: 50px solid transparent; }

效果:

efba66e53a03aac3920d7e1678aab0cc.png

把另外三条边透明之后,就只剩一个三角形了。



部分资料引用自:

  • http://caibaojian.com/css3/properties/border/index.htm
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值