精华内容
下载资源
问答
  • 制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以...
  • 我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面把通过实例来...
    制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面把通过实例来说明其应用技巧。
    

      1、给文本加边框


      上面的示例中,给一段文字加了不同的边框,只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码是:style="border:thin solid red";“border”后面的三个参数的含义是:边框线的宽度是:thin(细线);边框线的类型:solid(实线);边框线的颜色:red(红色)。我们定义边框,实际上就是设定这三个参数值。
      边框线的宽度有三个标准值:thin(细线)、medium(中粗线)和thick(粗线),此外,也可以自定义宽度,如:1pt、5px、2cm等。
      边框线的类型有九个确定值:none(无边框线)、 dotted(由点组成的虚线)、 dashed(由短线组成的虚线)、 solid(实线)、 double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)、 groove(3D沟槽状的边框)、 ridge(3D脊状的边框)、 inset(3D内嵌边框,颜色较深)、 outset(3D外嵌边框,颜色较浅),注意:如果系统不支持这些边框的属性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”代替。
      边框线的颜色:可以用十六进制的颜色代码,如#00ffcc。
      从上面可以看出,给文本加边框确实很简单,上例中后面那几个边框的设置,我不讲你也明白了吧!在这里告诉你一点小技巧,给一段文本加边框,可把CSS加在〈P〉标记里;给几段文本加边框,先把那几段文本用DIV标记括起来,再把CSS加在〈DIV〉标记里;若是要给一行文本加几个不同的边框,则需要把文本放在表格里,再把CSS分别加到〈TD〉标记里。

      2、给导航菜单加分隔线


      上面这个例子中的小白线,当然可以用图象来做,但我在这里是用CSS的“border”的扩展属性画了边框的一条边,这样代码要少的多。画边框的单边与上例的边框的四条边类似,一个边框的四条边的属性如下:
      边框线名称:border-top(上边框线)、border-right(右边框线)、border-bottom(下边框线)和boder-left(左边框线);每条边框线的类型、宽度和颜色的取值与“boder”属性相同。如本例中要定义每个单元格的左边框线为白色线,线的宽度为“1px”的实线,则CSS代码是这样的:style="border-left: 1px solid #ffffff"。
      在单独定义边框线时,若不给出某个值,那么就取其默认的初始值。在dreamweaver中定义CSS非常方便,不用编写代码;把常用的边框线一次定义好,放在外连式CSS文件中,要用时调用一下就行了,非常方便。

      3、在一个边框中采用不同宽度和颜色的边框线


      在本例中的效果,当然可以用上例中的方法来实现,但那样代码过多,可采用另一种合并的方法,把四条边的属性值分类放在一起,如本例的代码是这样的: 
      style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
      从上面可以看出,我把边框线的类型、宽度和颜色归类在一起定义了,这里请注意几点:
      一、四条边框线的位置顺序是:上边框线、右边框线、下边框线、左边框线;
      二、我在本例中边框线的类型只取了一种实线类型,实际上四条边也可以分别定义不同的类型;
      三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值,则其余三个自动取相同值,如:border-style:solid与border-style:solid solid solid solid的效果完全一样;如果仅给出两个或三个值,那么缺失边的属性值把取与对边相同的值。如:boder-width:thin thick与border-width:thin thick thin thick效果相同,border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
      Border属性的灵活应用,可以产生许多特殊效果,方法与上面介绍的相同,不再一一举例了。

    展开全文
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...

    1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色;

    2:属性使用细说:

    2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四条边都一一赋予

    例子:border:1px solid red;/*设置边框大小为1px的红色实线*/

    参数说明:

    第一个属性为设置边框大小:px为单位;

    第二个属性为设置边框类型:除了可以设置实线外,还可以设置其他,如虚线,或者无,具体可以查看

    W3CSchool关于border属性说明

    第三个属性为设置边框颜色:除了个别特定的颜色,red,black,blue,yellow等等外,一般用#000000到#FFFFFF之间的调整(三原色原理)

     

    2.2:第二种设置border的方式,元素是矩形的,有四条边,但这种方式设置只针对某一条边进行属性设置

    以下是对上,下,左,右边框的属性设置例子,简介明了,这里不再细说。

    1px黑色虚线上边框
    border-top:1px dashed #000

    1px黑色实线下边框
    border-bottom:1px solid #000

    1px黑色虚线左边框
    border-left:1px dashed #000

    1px黑色实线右边框
    border-right:1px solid #000

     

    展开全文
  • CSS中border的所有样式属性 1、solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px #000;的效果是一样的 效果图如下: 2、dotted:点划线 使用方法:border:dotted 1px #...

    CSS中border的所有样式属性

    1、solid:实线
    使用方法:border:solid 1px #000;
    我发现border:1px solid #000;和border:solid 1px #000;的效果是一样的
    效果图如下:
    在这里插入图片描述

    2、dotted:点划线
    使用方法:border:dotted 1px #000;
    同样的border:dotted 1px #000;和border:1px dotted #000;效果是一样的。
    效果如下图所示:
    在这里插入图片描述

    3、dashed:虚线
    使用方法;border:dashed 1px #000;
    同理:border:1px dashed #000;实现的效果是一样的。
    效果如下图所示:

    4、double:双线
    使用方法:border:double 1px #000;(试验过了没成功!)

    5、none:没线
    使用方法:border:none;
    效果如下图所示:
    在这里插入图片描述

    展开全文
  • border属性介绍 border属性设置元素边框。 边框3个要素如:粗细、线型、颜色。 边框线型属性值说明表如:      属性指 描述 none 定义无边框。 hidden 与 none 相同。不过应用于表时除外,对于表,...
  • CSS中border属性

    2019-07-11 09:32:54
    border: 1px solid blue; 第一个值:border-width:边框的宽度; 第二个值:border-style:边框的样式; 第三个值:border-color:边框颜色;(transparent:透明色) 分开写: border-width: 1px; border-color : ...

    合着写:

    	border: 1px solid blue;
        第一个值:border-width:边框的宽度;            
        第二个值:border-style:边框的样式;
        第三个值:border-color:边框颜色;(transparent:透明色)
    

    分开写:

        border-width: 1px;
        border-color : blue;
        border-style: solid;(实现边框)
                      none:无边框;
                      dashed:虚线边框;
                      double:双边框;
                      inherit:继承父元素;
    

    三角形:

        <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                .box {
                display: inline-block;
                border-top: 50px solid transparent;
                border-right: 50px solid cyan;
                border-bottom: 50px solid transparent;
                }
        </style>
    
    展开全文
  • border 边框属性可以说是我们在网页布局最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在...
  • 重温CSSBorder属性

    2014-02-22 18:10:48
    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。...border: 1px solid ...
  • border: 1px solid black;  上面的代码将给元素应用1px的边。即简洁又简单;但我们也可以稍作修改。 CSS Code复制内容到剪贴板 border-width: thick; border-style: solid; border-color: black;  ...
  • 在一个宽高为0像素的块状元素设置border属性,例如 01 .box{ 02   03 width:0px; 04   05 height:0; 06   07 border-bottom:50px #F00 solid; ...
  • CSS中元素的边框border属性

    千次阅读 2013-01-08 16:53:09
    元素的边框一般用来分隔页面的各个部分,在CSS中,边框属性可以分为以下几个属性,包括边框样式(border-style),边框宽度(border-width), 边框颜色(border-color)以及边框综合属性(border)等。  顶部边框样式...
  • 假设页面有个div,如何通过css做一个三角形。这是我们项目用到的今天就稍微总结下。顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px ...
  • css中border-solid长度问题html的border可以设置显示百分之几...css中border属性css中boder的颜色、厚度、宽度、高度怎么设置CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。 在表格中:bor...
  • border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。 例子 1 border-style:dotted solid double dashed; 上边框是点状 右边框是实线 下边框是...
  • CSS中border-style的属性

    2013-09-16 09:38:00
    属性可能的值 值 描述 none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted 定义点状边框。在...
  • CSS:不可思议的border属性

    千次阅读 2014-11-16 00:23:43
    CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。 1、正三角形: ....
  • CSS表格 - border 属性 border 简写属性在一个声明设置所有的边框属性。 font 简写属性 在一个声明设置所有字体属性。 可以按顺序设置如下属性border-widthborder-styleborder-color 如下代码: p{border:5...
  • CSS 中border样式

    2020-07-14 17:52:41
    border 简写属性在一个声明设置所有的边框属性border-width:用于为元素的所有边框设置宽度,或者单独地为4个边框设置宽度 border-style:用于设置元素所有边框的样式,或者单独地为4个边框设置边框样式 border-...
  • css中border-style属性可以有1-4个值:

    千次阅读 2015-03-02 09:07:39
    border-style属性可以有1-4个值: border-style:dotted solid double dashed; 上边框是 dotted右边框是 solid底边框是 double左边框是 dashed border-style:dotted solid double; 上边框是 dotted右边...
  • border有三个属性,为了代码的可读性,建议顺序为 border-width、border-style、border-color 如: p {border: 1px solid black } 但实际上,顺序调换并不影响border效果的呈现。
  • 其中,rgba 是 CSS3 属性。rgba 括号前 3 个数字代表着 red green blue 三种颜色的 rgb 值(0-255),最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1,越接近 1,代表透明度越低。 使用透明度...
  • 其中,rgba是CSS3属性,rgba括号前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值。范围从0到1,越接近1,代表透明度越低。 转载于:...
  • CSS solid 属性

    千次阅读 2013-11-21 10:41:16
    style="border:thin solid red" “border”后面的三个参数的含义是:边框线的宽度是:thin(细线);边框线的类型:solid(实线);边框线的颜色:red(红色)。 边框线的宽度有三个标准值:thin(细线)、...
  • CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。 1、正三角形: ....
  • 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></...以上代码便可以实现设计草图的banner,在css.cs
  • border是一个组合属性,它有四个值,每个值代表一个方向,每个方向都有宽度,线条样式和颜色 div{ width: 100px; height: 100px; border: 5px solid black; border-left: 5px solid red; border-right: 5px ...
  • CSS-12.css边框属性border

    千次阅读 2018-01-29 09:37:01
    我们会使用css中border属性来设置边框 一般会通过连写来设置border,他下面还有width,style,color的属性, 在开发中,我们会使用连写。 写法1:(按照方向) 快捷键:bd+ border: 1px solid #000; 这样的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 632
精华内容 252
关键字:

css中border属性solid