精华内容
下载资源
问答
  • border属性

    2020-09-30 11:17:14
    border属性及其应用 border 简写属性在一个声明设置所有的边框属性。 border: width style color 可以按顺序设置如下属性: border-width 1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等) 2.或者...

    border属性及其应用

    border 简写属性在一个声明设置所有的边框属性。
    border: width style color
    可以按顺序设置如下属性:

    • border-width

    1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
    2.或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

    • border-style

    1.none: 默认无边框
    2.dotted: 定义一个点线边框
    3.dashed: 定义一个虚线边框
    4.solid: 定义实线边框
    5.double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
    6.groove: 定义3D沟槽边框。效果取决于边框的颜色值
    7.ridge: 定义3D脊边框。效果取决于边框的颜色值
    8.inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
    9.outset: 定义一个3D突出边框。 效果取决于边框的颜色值

    • border-color

    name - 指定颜色的名称,如 “red”
    RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
    Hex - 指定16进制值, 如 “#ff0000”

    应用border属性绘制三角形
    原理:将边框设置足够宽就会显示三角形。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 0px;
    				height: 0px;
    				border-bottom: 100px solid green;
    				border-top: 100px solid red;
    				border-left: 100px solid #0000FF;
    				border-right: 100px solid orangered;
    			}
    			p{
    				width: 0px;
    				height: 0px;
    				border-bottom: 100px solid green;
    				border-top: 100px solid red;
    				border-left: 100px solid #0000FF;
    				border-right: 100px solid orangered;
    				border-color: red transparent transparent transparent;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    		<p></p>
    	</body>
    </html>
    
    

    在这里插入图片描述

    展开全文
  • 最后问了同学,才得知是用border属性做出来的。 符号如右: 其css代码如下: 复制代码代码如下: .fuhao { position:absolute; top:12px; left:12px; width:0px; height:0px; overflow:hidden; border-width:6px 0...
  • 下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • border属性介绍 border属性设置元素边框。 边框3个要素如:粗细、线型、颜色。 边框线型属性值说明表如:      属性指 描述 none 定义无边框。 hidden 与 none 相同。不过应用于表时除外,对于表,...
  • CSS 边框 border属性

    千次阅读 2018-02-16 22:12:27
    边框在CSS1中,就支持为元素添加边框,并可以设置边框的样式、颜色、及粗细。不过,当时的边框太过单一,只支持简单的线条...线条边框使用 border属性定义,图像边框使用 border-image 属性来定义,圆角边框使用 bo...

    为元素定义线条边框,最简单的办法就是使用 border属性。border为复合属性,语法格式为:

    
    
    1. border: <border-style> || <border-width> || < border-color>

    也就是说,border属性可以分解为边框样式(border-style)、边框宽度(border-width)、边框颜色(border-color)这 3 个属性,接下来分别进行介绍。

    border-style

    border-style属性是一个非常重要的边框属性,如果没有显式定义 border-style属性,或把 border-style属性设置为 none,元素将没有边框,并忽略 border-color属性 和 border-width属性。

    border-style属性的取值为预定义关键字,CSS内置了 10 种不同的边框样式,每个样式都由一个预定义关键字来定义。

    表 4‑1 border-style属性的取值及含义
    属性值样式说明
    none无边框,不占据页面空间,同时忽略 border-color属性和 border-width属性
    hidden隐藏边框,它有边框,只是不可见
    dotted点状线
    dashed虚线
    solid实线
    double双线,两条单线与其间隔的和等于指定的 border-width属性的值
    groove3D凹槽
    ridge3D凸槽
    inset3D凹边
    outset3D凸边

    如果一个元素的边框、背景、内容发生重叠,则边框绘制在元素的背景之上,内容之下。这 10 种不同的边框样式,在浏览器中的渲染效果如图 4‑4 所示:

    不同边框的样式图4-4 不同边框的样式

    如果border-width属性设置为0,则忽略border-style属性。可以为给定的边框定义多个样式。如,以下规则定义的上边框为点状线、右边框为单实线、下边框为双实线、左边框为虚线:

    
    
    1. border-style: dotted solid double dashed;

    可以看出,border-style属性的 4个参数值也采用 top-right-bottom-left 的顺序,其作用规则与 padding 相同。

    有时候,你可能只想为元素的一边设置边框样式,而不是同时设置所有的 4 个边。这就要用到单边边框的样式属性,按上、右、下、左的顺序,对应的属性依次为border-top-style、border-right-style、border-bottom-style、border-left-style。

    border-width

    border-width属性用来设置边框的粗细程度,可以使用长度值或预定义关键字 thin | medium | thick,默认值为 medium。长度值表示具体的数值,如2px 或 0.5em,不允许负值。

    如果未显式声明 border-width属性,则边框的宽度或者为零(使用reset css时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)。

    如果 border-style属性的值为 none,则无论是否显式定义边框的宽度,其宽度都会被自动设置为 0。由于 border-style属性的默认值是 none,因此,如果希望边框出现,就必须显式声明一个边框样式。

    border-width属性需要 4 个参数值,也采用 top-right-bottom-left 的顺序。如:

    
    
    1. border-width: 1px 2px 3px 4px;

    上述规则就表示上边框的宽度为 1px、右边框的宽度为 2px、下边框的宽度为 3px、左边框的宽度为 4px。

    也可以使用单边属性,按上、右、下、左的顺序,border-width对应的属性依次为border- top-width、border- right-width、border-bottom-width、border-left-width。

    border-color

    border-color属性用来设置边框的颜色,其值可以是任意合法CSS的颜色,如预定义的颜色名、十六进制数值、RGB、RGBA、HSL、HSLA。在CSS2中, 还引入了边框颜色值 transparent,这个值使边框透明,用于创建有宽度但不可见的边框。

    如果 border-width属性的值等于 0 或 border-style属性的值为 none,则忽略该属性。border-color属性需要 4 个参数值,也采用 top-right-bottom-left 的顺序。如:

    
    
    1. border-color: red black green blue;

    上述规则就表示上边框的颜色为红色、右边框的样式为黑色、下边框的样式为绿色、左边框的样式为蓝色。

    边框颜色按上、右、下、左的顺序,border-color属性对应的独立属性依次为 border-top-color、border-right-color、border-bottom-color、border-left-color。

    默认情况下,一个元素的边框颜色为元素内容的前景色。因此,如果没有显式声明边框颜色,边框的颜色将与元素的文本颜色相同。如果该元素不包含任何文本,如只包含图像,那么它的边框颜色,就是其父元素的文本颜色(因为 color 属性具有继承性)。  

    说明:单边复合属性

    在定义单边属性时,如果每次都要使用诸如 border-top-width、border-top-color 这样的属性,就会带来诸多不便。

    于是,CSS也专门为单边定义了复合属性,按上、右、下、左的顺序,对应的单边属性依次为 border-top、border- right、border-bottom、border-left,它们的语法相同,格式如下:

    
    
    1. border-top: <border-style> || <border-width> || < border-color>

    有了这些属性,就可以创建出一些复杂的边框。如,以下规则为容器的 4 个边创建了 4 种不同的边框:

    
    
    1. div {
    2. width: 200px;
    3. height: 60px;
    4. border-top: 10px dotted #006dcc;
    5. border-right: 10px solid #da4f49;
    6. border-bottom: 10px dashed #5bb75b;
    7. border-left: 10px double #faa732;
    8. }

    上述代码的运行结果如图 4 所示:

    图4

    实际上,在声明单边属性时,具体值的顺序并不重要,浏览器可以根据值的类型自动识别,并应用到相应的属性。所以,以下三个规则会得到相同的边框效果:

    
    
    1. div { border-top: 10px dotted #006dcc; }
    2. div { border-top: dotted 10px #006dcc; }
    3. div { border-top: #006dcc dotted 10px; }

    并且,如果希望某个值使用默认值,也可以省略其值。如,以下规则就表示希望边框使用与容器中的文本相同的颜色:

    
    
    1. div { border-top: 10px dotted; }

    需要注意的是,这些单边属性只能应用到一个特定的边,因此,只需声明一个宽度值、一个颜色值和一个边框样式值。否则,将导致整个声明无效。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 虽然圆形的头像图标看起来很美很新颖,但是实现起来却是很简单,主要运用了border属性去限定头像图片的边界,从而将其规定为自己想要的形状
  • 这里边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素。 一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例: CSS代码: .hackhome{border:1px ...
  • 由于border属性引起的div宽度问题,确实很让人头疼,在本文将为大家介绍下使用JS是如何解决的,感兴趣的朋友不要错过
  • border 属性样式

    千次阅读 2018-09-07 20:44:14
    border: solid 1px; 实线边框 2.border: dotted 1px; 点划线边框 3.border: dashed 1px; 虚线边框 4.border: double 5px; 双线边框 border: none border:hidden; 都是定义无边框,但是对于表来...
    1. border: solid 1px;
      实线边框
      这里写图片描述
      2.border: dotted 1px;
      点划线边框
      这里写图片描述
      3.border: dashed 1px;
      虚线边框
      这里写图片描述
      4.border: double 5px;
      双线边框
      这里写图片描述

    2. border: none
      border:hidden
      都是定义无边框,但是对于表来说,hidden 用于解决边框冲突。(意思就是隐藏)
    展开全文
  • border — 定义四个边的宽度,样式,颜色 取值:[ <border> || <border> || <border> ] | inherit [ <border> || <border> || <border> ]: 边框宽度,样式,颜色属性中的一个或多个 inherit: 继承 初始值: none 继承性: ...
  • 几种border属性

    2020-08-20 10:08:53
    border: 1px solid black; } div { width:100px; height:100px; border-width:10px; border-style:dotted; border-color:red; } 四个边框都是点状 div { width:100px; height:100px; border-width:10px; border-...
    <!DOCTYPE html>
    <html >
     <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" type="text/css" href="Untitled3.css">
     </head>
     <body>
         <div></div>
    	 
     </body>
    </html>
    
    
     div {
       width:100px;
       height:100px;
       border: 1px solid black;
      
    }
    

    在这里插入图片描述

    div {
       width:100px;
       height:100px;
       border-width:10px;
       border-style:dotted;
       border-color:red;
      
    }
    

    在这里插入图片描述
    四个边框都是点状

     div {
       width:100px;
       height:100px;
       border-width:10px;
       border-style:dotted solid double dashed;
       border-color:red;
      
    }
    

    在这里插入图片描述
    上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线

    div {
       width:100px;
       height:100px;
       border-width:10px;
       border-style:dotted solid double;
       border-color:red;
      
    }
    

    在这里插入图片描述
    上边框是点状
    右边框和左边框是虚线
    下边框是双线

     div {
       width:100px;
       height:100px;
       border-width:10px;
       border-style:dotted solid ;
       border-color:red;
      
    }
    

    在这里插入图片描述
    上边框和下边框是点状
    右边框和左边框是实线
    也可以单独设置border的边框。如下:

     div {
       width:100px;
       height:100px;
       border:1px solid black;
       border-left:10px solid red;
       border-right:10px solid green;
      
      
    }
    

    在这里插入图片描述

    展开全文
  • DIV 区块或 span 的边框,也可以应用到其他的网页元素的边框上,例如网页标题的边框、图片的边框(img border)… 等,所有的主流浏览器都支援 CSS border 属性。CSS border 语法介绍: CSS Code复制内容到剪贴板...
  • CSS的border属性的值由border-width,border-style,border-color,这三个部分组成,其顺序随意
  • CSS Border属性制作小三角,需要的朋友可以参考下。
  • 在实际开发中,我们通常会使用border的简写属性,例:   即:border:宽度 、线条类型、 颜色; 但border的简写属性是同时应用于四条边框的,当我们想要制作相同粗细、线条类型但不同颜色的边框时,常用的简写方式...
  • border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在...
  • 深入理解之border属性(第一期)

    千次阅读 2019-03-03 13:42:30
    之前在慕课看到了这个系列的...border-width属性不支持百分比值,不会因为设备的尺寸变化而变大(类:outline,box-shadow,text-shadow) border-width支持关键字,thin(1px 细),medium(3px 默认),thick(5px 粗) ...
  • 你知道吗,今天给大家分享一个脚本工具,可以帮助您启用CSS3的支持IE浏览器(IE6)与新的CSS3属性,包括:border-radius属性,box-shadow(阴影),text-shadow(影子的文本)。 使用方法很简单: behavior: url(ie...
  • 今天做实验的时候被table的border属性搞的眩晕(´・Д・)」特此总结一下。 (我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。) 一、内部样式表中内table的border属性测试 代码: <!...
  • 原生input框是自带border属性的,但有时候得去掉的话怎么办呢? 这个时候可以把border设置为none 如果也要去掉点击时的光标效果则设置 input:focus{ outline:none; } 或者 input{ outline:medium; } ...
  • HTML关于border属性的一点小领悟

    千次阅读 2018-06-12 17:55:19
    我们为这里的li设置了一个border,然后我们现在想改变border-bottom的颜色。通常我们会有两种做法:左侧截图中的方法能够改变border-bottom的颜色,而右侧和下侧截图这种两种方式border-bottom的颜色将不会发生变化...
  • CSS border 属性及用border画各种图形

    千次阅读 2016-08-28 10:58:10
    CSS border 属性 定义和用法 border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性border-widthborder-styleborder-color 如果不设置其中的某个值,也不会出问题,比如 border:solid ...
  • 表格tr不能设置border属性

    千次阅读 2019-05-26 15:49:15
    解决方案1:给table设置border-collapse:collapse; 解决方案2:给table设置border=“1” cellpadding=“50” cellspacing=“0”;
  • 都没什么问题,问题就在于我加了border属性后,文本内容不在div之中了,删除border就又好了。我不知道是因为什么,难道border上下还占据大小的。 希望懂的人给详细解答下。 ![图片说明]...
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 338,686
精华内容 135,474
关键字:

border属性