精华内容
下载资源
问答
  • 属于边框属性样式的是
    千次阅读
    2019-09-11 22:54:27
    边框属性
      边框有3个属性:
        一个是边框宽度属性,用于设置边框的宽度,
        二是边框颜色,用于设置边框的颜色,
    	三是边框样式,用于控制边框的样式
    	
    .1边框样式border-style
    
    定义边框的风格样式,用于指定可见的边框。可以设置上边框样式border-top-style,下边框样式border-bottom-style
    左边框样式,border-left-style,右边框样式border-right-style
    border-style:样式值
    border-top-style:样式值
    border-bottom-style:样式值
    border-left-style:样式值
    border-right-style:样式值
    
    取值:
    
    none        无边框
    hidder    隐藏边框,IE不支持
    dotted    边框由点组成
    dashed     边框由短线组成
    solid 边框由实线
    double 双实线
    groove    边框带有立体感的沟槽
    ridge     边框呈脊形
    inset     边框内嵌一个立体边框
    outset   边框外嵌一个立体边框
    
    .2边框宽度border-width
    
    设置元素边框的宽度
    border-width:宽度值
    border-top-width:宽度值
    border-right-width:宽度值
    border-bottom-width:宽度值
    border-left-width:宽度值
    数字px,长度是由数字和单位组成的长度值,不可为负值
    
    .3边框颜色
    
    用来设置边框的颜色,16种颜色的RGB值来设定
    border-width:颜色值
    border-top-color:颜色值
    border-right-color:颜色值
    border-bottom-color:颜色值
    border-left-color:颜色值
    用来设置上,右,下,左,边框的颜色,也可使用border-color属性同意设置4个边框的颜色
    
    .4边框属性border
    设置元素的边框样式,宽度,颜色
    border:颜色值
    border-top:颜色值
    border-right:颜色值
    border-bottom:颜色值
    border-left:颜色值

     

    更多相关内容
  • border 样式属性用于设置元素的边框属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置 边框样式组成: border-width 设置边框粗细;常用的属性值为像素(px) border-style 设置边框线型 ...

    border 样式属性用于设置元素的边框,属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置

    边框的样式组成:

    • border-width 设置边框粗细;常用的属性值为像素(px)

    • border-style 设置边框线型

      属性值描述
      solid实线
      dashed虚线
      dotted点状线
    • border-color 设置边框颜色;属性值可以是 颜色单词(red、purple等)、十六进制颜色值(#fff、#ff0000 等)、rgb(255,255,255);默认值为 transparent(透明),如果不设置边框颜色的在浏览器中默认显示为黑色边框,是因为继承了 html 默认的 color 属性值为:rgb(0, 0, 0)

    通过 border-widthborder-styleborder-color 都是统一设置元素的四条边框的样式,无法单独设置某一条边框

    边框简写:

    上述边框样式可以进行简写(综合设置)

    语法:

    border: border-width border-style border-color;
    

    示例:

    border: 1px solid #f00;
    

    单独设置某一条边框:

    样式属性:

    • border-top 上边框
    • border-right 右侧边框
    • border-bottom 底部边框
    • border-left 左侧边框

    这些属性都是综合属性,需要设置 border-widht、border-style 和 border-color

    示例:

    border-right: 2px dashed red;
    

    如果想要单独设置某条边框的粗细、样式或颜色,还可以进行细分;不过实际开发中用的不多

    以上边框为例,样式属性有:

    • border-top-width 上边框的边框粗细
    • border-top-style 上边框的边框样式
    • border-top-color 上边框的边框颜色
    展开全文
  • css边框属性

    千次阅读 2021-03-26 16:54:43
    一:css边框属性 1.上边框: border-top-style:样式 border-top-width:宽度 border-top-color:颜色 border-top:宽度,样式,颜色 2.下边框: border-bottom-style:样式 border-bottom-width:宽度 border-bottom-color...

    一:css边框属性

    1.上边框:

    border-top-style:样式
    border-top-width:宽度
    border-top-color:颜色
    border-top:宽度,样式,颜色

    2.下边框:

    border-bottom-style:样式
    border-bottom-width:宽度
    border-bottom-color:颜色
    border-bottom:宽度,样式,颜色

    3.左边框:

    border-left-style:样式
    border-left-width:宽度
    border-left-color:颜色
    border-left:宽度,样式,颜色

    4.右边框:

    border-right-style:样式
    border-right-width:宽度
    border-right-color:颜色
    Border-right:样式,宽度,颜色

    二:(1)设置边框样式(border-style)常用属性值如下

    ·none:没有边框,即忽略所有边框的宽度(默认值)
    ·solid:边框为单实线
    ·dashed:边框为虚线
    ·dotted:边框为点线
    ·double:边框为双实线
    ·border-top-style:上边框样式
    ·border-right-style:右边框样式
    ·border-bottom-style:下边框样式
    ·border-left-style:左边框样式
    ·border-style:上边框样式 右边框样式 下边框样式 左边框
    ·border-style:上边框样式 左右边样式 下边框样式
    ·border-style:上下边框样式 左右边框样式
    ·border-style:上下边框样式

    (2)设置边框宽度(border-width)

    ·border-top-width:上边框宽度
    ·border-right-width:右边框宽度
    ·border-bottom-width:下边框宽度
    ·border-left-width:左边宽宽度
    ·border-width:上边框宽度[右边框宽度,下边框宽度,左边宽宽度]

    (3)设置边框颜色(border-color)

    ·border-top-color:上边框颜色
    ·border-right-color:右边框颜色
    ·border-bottom-color:下边框颜色
    ·border-left-color:左边宽颜色
    ·border-color:上边框颜色[右边框颜色 下边框颜色 左边框]

    (4)综合设置边框

    border:宽度 样式 颜色;
    P{border-top:2px solid #ccc;}//定义上边框,各个值顺序任意
    例如将二级标题的边框设置为双实线,红色,3像素宽,代码如下: h2{border:3px double red;}
    常用的复合属性有font-字体,border-边框,margin-外边距和background-背景等。

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css边框样式1</title>
    
        <style type="text/css">
            #OneBox{
                width: 800px;
                height: 800px;
                background: red;
                opacity: 0.5;
    
                border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
                /*
                    边框的样式:solid:实线  dashed:虚线  dotted:点线  double:双线
                */
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -400px 0 0 -400px;
            }
    
            #twoBox{
                width: 600px;
                height: 600px;
                background: yellow;  
    
                border: 8px dashed green; /* 虚线 */
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -300px 0 0 -300px;
            }
    
            #threeBox{
                width: 400px;
                height: 400px;
                background: blue;  
    
                border: 12px dotted black; /* 点线 */
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -200px 0 0 -200px;
            }
    
            #fourBox{
                width: 200px;
                height: 200px;
                background: green;  
    
                border: 16px double black; /*双线*/
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -100px 0 0 -120px;
            }
        </style>
    </head>
    <body>
    
        <div id="OneBox">
            <div id="twoBox">
                <div id="threeBox">
                    <div id="fourBox">
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
        
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css边框样式2</title>
    
        <style type="text/css">
            *{
                padding: 0px; margin: 0px;
            }
            #OneBox{
                width: 800px;
                height: 800px;
                background: red;
                opacity: 0.5;
    
                border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
                /*
                    边框的样式:solid:实线  dashed:虚线  dotted:点线  double:双线
                */
    
                /*
                    单独写法
                        单独设置某一边框的某一属性 宽度 边框样式 颜色
    
                */
    
                border-left-width: 40px;
                border-left-style: dashed;
                border-left-color: green;
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -400px 0 0 -400px;
            }
    
            #twoBox{
                width: 600px;
                height: 600px;
                background: yellow;  
    
                border: 8px dashed green; /* 虚线 */
    
                /*
                    复合写法1 设置某一条边框的全部属性
                        设置右边框为50px 点状边框 绿色
                */
                border-top: 50px dotted green;
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -300px 0 0 -300px;
            }
    
            #threeBox{
                width: 400px;
                height: 400px;
                background: blue;  
    
                border: 12px dotted black; /* 点线 */
    
                /*
                    复合写法2——设置全部边框的某一属性
                */
                border-width: 10px 16px; /* 上下 左右 */
                border-style: solid double dashed; /* 上 左右 下 */
                border-color: white red green black; /* 上 右 下 左 */
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -200px 0 0 -200px;
            }
    
            #fourBox{
                width: 200px;
                height: 200px;
                background: green;  
    
                border: 16px double black; /*双线*/
    
                /*
                    复合写法3——设置全部边框为同样的属性
                */
                border: 10px solid purple;
    
                position: absolute;
                top: 50%; 
                left: 50%;
                margin: -100px 0 0 -120px;
            }
        </style>
    </head>
    <body>
    
        <div id="OneBox">
            <div id="twoBox">
                <div id="threeBox">
                    <div id="fourBox">
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
        
    </body>
    </html>
    
    展开全文
  • css 有关边框属性 句法 (Syntax) border-style边框样式 : { { : {{ none | 无 | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 | solid | 固体 | double | 双 | groove | 凹槽 | ridge | 脊 inset | 插图 outset ...

    css 有关边框的属性

    句法 (Syntax)

    border-style 边框样式 : { { {{ none | | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 | solid | 固体 | double | | groove | 凹槽 | ridge | inset | 插图 outset }   一开始 } 1 to 4 values | 1〜4个值 | inherit } 继承 } ; ;

    描述 (Description)

    The shorthand property border-style sets the style of the border on all four sides of an element using the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the shorthand order.

    速记属性border-style使用指定的值在元素的所有四个侧面上设置border-style 。 每个边框都可以有其自己的值-请参阅速记属性中的助记符(TRouBLe),以方便地记住速记顺序。

    Borders are placed on top of the element’s background.

    边框放置在元素背景的顶部。

    (Example)

    This style rule assigns a solid border to the top, a dashed border to the bottom, and a dotted border to the left- and right-hand sides of paragraphs within the element with ID "example":

    此样式规则在ID为"example"的元素内的段落的顶部分配一个实线边框,在底部分配一个虚线边框,并在左侧和右侧分配一个虚线边框:

    #example p {
      border-style: solid dotted dashed;
    }

    (Value)

    • none means no border will show, and the computed border-width is zero.

      none表示不显示任何边框,并且计算出的border-width为零。

    • hidden has the same meaning as none, except when it refers to table borders in cases where two cells share a border, and the table cells have collapsed borders (border-collapse:collapse;). The value hidden ensures that no border is drawn, since hidden takes precedence over all other border styles. If none had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence. See Table Formatting for more information.

      hidden具有与none相同的含义,除了在两个单元格共享一个边框且表单元格具有折叠边框的情况下引用表格边框时( border-collapse:collapse; )。 hidden值确保不绘制边框,因为hidden优先于所有其他边框样式。 如果none为该单元格中的一个边框使用none边框,则仍将绘制边框,因为相邻单元格的边框将优先。 有关更多信息,请参见表格式

    • dotted implements the border as a series of dots.

      dotted将边框实现为一系列点。

    • dashed implements the border as a series of dashes.

      dashed实现边境一系列破折号。

    • solid implements the border as a solid line.

      solid将边框实现为实线。

    • double implements the border as two solid lines. The sum of the two border widths and the space between them equals the value that has been set for border-width.

      double将边框实现为两条实线。 两个边框宽度的总和以及它们之间的间隔等于为border-width设置的值。

    • groove is a three-dimensional effect that gives the impression that the border is carved into the canvas.

      groove是三维效果,给人的印象是将边框雕刻到画布中。

    • ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.

      ridge是3D效果,与groove效果相反,因为边框似乎从画布突出。

    • inset is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, the inset value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the value ridge.

      inset是3D效果,给人一种将盒子嵌入画布的印象。 当在已应用分隔边框模型的表上使用它时, inset值似乎使整个盒子看起来好像已嵌入画布中。 与折叠边框模型一起使用时,将其与ridge值相同。

    • outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the border makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way as groove.

      outset是3D效果,与inset具有相反的效果,因为边框给人的印象是盒子从画布突出。 当在已应用分隔边框模型的表上使用边框时,边框使整个盒子看起来好像是从画布中出来的。 与塌陷的边界模型一起使用时,其行为与groove相同。

    Previously, in CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

    此前,在CSS1,用户代理被允许解释所有dotteddasheddoublegrooveridgeinset ,并outset样式为solid

    翻译自: https://www.sitepoint.com/border-style-css-property/

    css 有关边框的属性

    展开全文
  • 针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到。在对border...
  • CSS边框的常用属性看这里
  • 1.border边框属性 可以设置一到四个值(上边框,右边框,下边框,左边框) border-top: 10px solid black; //上 border-right: 10px double red; //右 border-bottom: 10px dotted blueviolet; //下 border-left: ...
  • Css的边框属性

    2021-12-05 22:27:08
    边框属性可以用来给内容创建边框 当然也可以给表单属性自带的边框样式进行修改定义 如图所示,通过在表单标签中创建css样式达到对表单默认边框的修饰美化 如果是纯文字也可以通过创建css样式到达边框的创建效果 ...
  • 使用FRAME属性可以控制表格边框样式类型。 基本语法 语法解释 VALUE的取值如下表所示: 表格的边框样式 属 性 值 描述 Above 显示上边框 Below 显示下边框 Border 显示上下左右边框 Box 显示上下左右...
  • css的表格属性以及边框属性
  • 基础你可能很熟悉边的最基本用法。 CSS Code复制内容到剪贴板 border: 1px solid black;...虽然乍看起来单个属性的方式没必要,但有极少数的情况下,当它是有利的,例如当你需要在特定的事件发生时更新
  • 盒子模型的边框属性

    2020-06-24 15:15:52
    一、盒子边框(border) ...设置边框样式:border-style none:没有边框即忽略所有边框的宽度(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 dotted:边框为点线 double:边框为双实线
  • 在css中设置边框可以用哪些属性

    千次阅读 2021-08-05 04:57:25
    边框属性允许我们指定一个元素边框的样式和颜色。本文操作环境:windows10系统、css 3、thinkpad t480电脑。边框属性简介:CSS边框属性允许你指定一个元素边框的样式和颜色。常用属性:border 简写属性,用于把针对...
  • CSS边框属性

    2022-07-13 15:28:41
    注:连写格式中颜色属性可以省略,省略之后默认是黑色连写格式中样式不能省略,省略后看不到边框连写格式中宽度可以省略,省略后能看到边框2.连写(分别设置四条边的边框)border-top:边框的宽度 边框样式 边框颜色...
  • 1.组成边框的样式 - 边框宽度 border-...边框属性的属性值 - 边框宽度:数值加单位(px) - 边框样式:solid(实线) dashed(虚线) dotted(点线) double(双实线) - 边框颜色 - 英文单词:yellow、green、red... - 十六进制
  • 一、边框属性 二、内边框属性 三、外边框属性 四、盒子模型 五、盒子box-sizing属性 六、盒子模型练习 七、盒子居中和内容居中 八、清空默认边框 九、行高和字号 十、还原字体和字号 十一、网页布局方式 ...
  • 边框属性

    千次阅读 2019-10-28 22:25:41
    我们先说一下边框属性: 1、边框 (1)、它的简写方式: 通过一个属性控制四个方向边框的效果 它的属性是: border:width、style、color; 它们三个分别为: width:边框的宽度,边框的粗细,是以px为单位的; style...
  • CSS-边框属性

    热门讨论 2017-12-05 21:24:32
    列表属性、光标属性与滤镜属性
  • 盒模型&边框属性

    2021-07-16 19:17:46
    一、盒模型 1、作用:规定元素位置 2、属性 (1)、padding:填充(会使盒子撑大,要是想保证盒子大小不变,应在样式里减小相应的尺寸) ...二、边框属性 1、border-color:边框颜色 2、border-width:边框大小
  • CSS中的边框属性和属性值

    千次阅读 2019-07-24 16:47:33
    CSS中的边框属性和属性值
  • 边框(border): css控制的边框属性包括border-width, border-color, border-style. Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个“will soon be dead” 的浏览器, 这里只例举一个最为知名的关于...
  • css 边框属性有哪些?

    2021-06-12 06:19:05
    border在一个声明中设置所有的边框属性。border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。border-bottom-width设置下边框的宽度。...
  • CSS 边框属性

    2022-05-12 23:13:17
    用于设置元素所有边框样式,或者单独地为各边设置边框样式。 border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 border-color ...
  • 1、CSS outline 属性outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。p{outline:#00FF00 dotted thick;}2、CSS border-radius 属性border-radius 属性是一个简写属性,用于设置...
  • html--盒子的边框属性(border)

    千次阅读 2022-07-12 08:57:21
    border的属性+属性值==边框
  • border边框属性的介绍

    2022-06-27 17:03:20
    CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度,颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界
  • CSS中的边框属性

    2019-10-30 23:10:36
    边框属性分类: Document 1.边框 2.边框倒角 3.边框阴影 4.轮廓 一.边框属性 1. 边框 1. 简写方式: 通过一个属性控制四个方向边框的效果。 属性: border:width style color; width:宽度,...
  • 边框样式边框属性

    千次阅读 2016-10-03 17:11:38
    CSS 边框属性 属性 描述 border 简写属性,用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框...
  • HTML表格标记教程(13):内部边框样式属性RULES互联网 发布时间:2008-10-17 18:56:46 作者:佚名 我要评论通过RULES可以控制表格内部边框样式。基本语法语法解释value的取值如下表所示:表格的内部边框样式属 性 值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 136,633
精华内容 54,653
热门标签
关键字:

属于边框属性样式的是