精华内容
参与话题
问答
  • CSS 边框 border属性

    千次阅读 2018-02-16 22:12:27
    在CSS3中,为了实现丰富的边框效果,对边框属性进行了扩展,除了线条边框外,也可以把图像作为边框,同时还可以创建圆角边框,也可以使用盒阴影来为元素添加一个或多个边框阴影。线条边框使用 border属性定义,图像...

    为元素定义线条边框,最简单的办法就是使用 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(边框)的两种写法

    千次阅读 2019-01-31 19:20:40
    咱们接着上面的说讲了border的设置多种线条的方法和属性 ...border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。 例子1 border-style:dotted...

    咱们接着上面的说讲了border的设置多种线条的方法和属性
    接下来说
    border-style:solid 和 border:1px #eeeee solid 的两者区别

    1,border-style

    定义和用法
    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    只有当这个值不是 none 时边框才可能出现。

    例子1

    border-style:dotted solid double dashed;
    
    • 上边框是点状
    • 右边框是实线
    • 下边框是双线
    • 左边框是虚线
      例子2
    border-style:dotted solid double;
    
    • 上边框是点状
    • 右边框和左边框是实线
    • 下边框是双线

    因此而看设置border-style的边框是可以设置上下左右的而下一种就不行
    因为他是单纯设置线条的而border-style是设置边框的

    2,border:1px #eeeee solid

    border
    是指设置边框的,他也可以设置上下左右边框 如:(border-top)上边框。
    1px
    是指设置边框的厚度,常用单位如(px,%,等)
    #eeeee
    是指设置边框的颜色,设置方法如(#eeeee,blue 颜色的英文)最好用#eeeee方法,能够准确的知道色号
    solid
    设置设置边框的线条的样式,还可以设置,dotted,dashed,double,groove,inset等

    总结

    border-style可以设置边框的上下左右的线条
    而 border:style 1px #eeeee solid;可以设置单独的边框和上下左右的边框但是不能像border-style就可以设置不同的边框了
    这就是他们之间的差异

    用CSS写border的透明样式

    border: 1px solid transparent;
     
     border-color: transparent;
      
     border-color: rgba(0,0,0,0);
    

    等还有许多种方法,因人而异吧!

    展开全文
  • HTML5边框的设置(border)

    万次阅读 2018-10-23 00:17:15
    CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:

    边框的样式:
    solid 实线 dotted 点线 dashed 虚线 double 双线 inset 三维立体效果
    边框有3个元素,用法是 border-top:10px soild red;

    border-top:上边
    border-bottom:下边
    border-left:左边
    border-right:右边

    例子:
    CSS画出一个三角形,

    CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>透明边框</title>
    
      <style>
      body{
      background:#333300;
      
      }
         #a{
    	     width:0px;
    		 height:0px;
    		 border-top:30px solid red;
    		 border-bottom:30px solid transparent;
    		 border-left:30px solid transparent;
    		 border-right:30px solid transparent;
    	 
    	 }
    
    
      </style>
     </head>
     <body>
      <div id=a></div>
     </body>
    </html>
    

    设置透明边框的好处是如果页面背景不是白色的话,设置了透明边框后,边框就看不到,普通方法让边框颜色设置为白色,如果背景不是白色而是其他颜色的话,就能看出露出一块白色的地方。

    展开全文
  • css3学习05——边框、背景、渐变颜色、文本效果、2D转换、3D转换 1、边框 border-radius:30px;/*圆角半径*/ box-shadow: 50px 50px 10px #888888;/*边框阴影*/ /*css样式*/ { border:15px solid transparent;...

    css3学习05——边框、背景、渐变颜色、文本效果、2D转换、3D转换


    1、边框

    border-radius:30px;/*圆角半径*/
    box-shadow: 50px 50px 10px #888888;/*边框阴影*/
    
    /*css样式*/
    {
    	border:15px solid transparent;
    	width:250px;
    	padding:10px 20px;
    }
    #stretch
    {
    	-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    	-o-border-image:url(border.png) 30 30 stretch; /* Opera */
    	border-image:url(border.png) 30 30 stretch;
    }
    /*body内容*/
    <div id="stretch">这里,图像被拉伸以填充该区域。</div>
    

    运行截图:

     2、背景

    /*css样式*/
    #example1 {
        background-image: url(img_flwr.gif), url(paper.gif);
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
        padding: 15px;
    }
    /*body内容*/
    <div id="example1">
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    运行截图:

    /*css样式*/
    #example1 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
    }
    /*body内容*/
    <div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    </div>

    运行截图:

     3、渐变颜色

    /*css样式*/
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */
    }
    /*body内容*/
    <h3>线性渐变 - 从左到右</h3>
    <p>从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
    <div id="grad1"></div>

    运行截图:

    /*css样式*/
    #grad2 {
        height: 200px;
        background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
    }
    /*body内容*/
    <h3>7 个颜色结点(均匀分布)</h3>
    <div id="grad2"></div>

     运行截图:

    /*css样式*/
    #grad2 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */
    }
    /*body内容*/
    <p><strong>圆形 Circle:</strong></p>
    <div id="grad2"></div>

     运行截图:

    /*css样式*/
    #grad4 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
    }
    /*body内容*/
    <p><strong>圆形 Circle:</strong></p>
    <div id="grad2"></div>

    运行截图;

    4、文本效果

    text-shadow: 5px 5px 5px #FF0000;/*文本背景及文字阴影*/
    word-wrap:break-word;/*文本遇到边框自动换行*/
    

     5、2D转换

    /*css样式*/
    div
    {
    	width:100px;
    	height:75px;
    	background-color:red;
    	border:1px solid black;
    }
    div#div2
    {
    	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    }
    /*body内容*/
    
    

    运行截图:

    6、3D转换

    /*css样式*/
    #div1
    {
    	position: relative;
    	height: 150px;
    	width: 150px;
    	margin: 50px;
    	padding:10px;
    	border: 1px solid black;
    	perspective:150;
    	perspective-origin: 10% 10%;
    	-webkit-perspective:150; /* Safari and Chrome */
    	-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
    }
    
    #div2
    {
    	padding:50px;
    	position: absolute;
    	border: 1px solid black;
    	background-color: red;
    	transform: rotateX(45deg);
    	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
    }
    /*body内容*/
    
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>

     运行截图:

    展开全文
  • CSS边框和外轮廓

    千次阅读 2018-10-10 07:47:45
    CSS 边框 CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线,对于这些线条,您可以自定义它们的样式、宽度以及颜色。使用CSS边框属性,我们可以创建出比HTML中更加优秀的效果 边框宽度: 您可以通过 ...
  • 边框回归(Bounding Box Regression)详解

    万次阅读 多人点赞 2017-08-31 22:38:05
    Bounding-Box regression最近一直看...这些paper中损失函数都包含了边框回归,除了rcnn详细介绍了,其他的paper都是一笔带过,或者直接引用rcnn就把损失函数写出来了。前三条网上解释比较多,后面的两条我看了很多pape
  • css3中边框的4种样式

    万次阅读 2016-07-08 11:44:56
    border是CSS的一个属性,用它可以给能确定范围...一般设置边框都有3个属性-宽度、线的样式、颜色,如果宽度设置了很多PX,那么就可以给边框设置很多颜色,让边框显示出渐变的效果,不过设置边框不同颜色时只能通过borde
  • CSS-底部边框 | border-bottom

    千次阅读 2018-09-13 10:53:26
    border-bottom 简写属性把下边框的所有属性:border-bottom-color,border-bottom-style与border-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。 border-bottom: 1px; border-bottom: 2...
  • 边框

    2020-11-19 20:54:07
    边框写三角形: width:0; height:0 然后再设置边框 注:边框默认是添加在盒子外面的 不想被撑大解决方法: 1.做减法 2.设置属性box-sizing:border-box;盒子类型是边框盒子(让盒子成为怪异盒子) 设置为怪异盒子...
  • 微信小程序css篇----边框(Border)

    万次阅读 多人点赞 2016-12-30 11:22:08
    边框:border 设置对象边框的特性。 1.语法:border:length style color  2.style:none ,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。   二.相关属性。 1.border-width:设置边框...
  • 去掉input框的边框以及当点击时显示的边框 解决方法:http://www.yayihouse.com/yayishuwu/chapter/1407
  • CSS边框应用 - 半透明边框

    千次阅读 2018-06-07 22:35:03
    相信你以前肯定尝试过 CSS 中的半透明颜色, 比如 rgba() 和 hsla()。半透明颜色是 2009 年发生的一场重大变革。 从那以后, 我们终于可以在网页设计中使用它们了, 但是为了尝鲜还需要付出额外的代价。...
  • CSS边框盒子模型

    千次阅读 2016-03-23 13:25:30
    盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所见的盒子也就是装东西的箱子,也具有这些属性,所以叫...
  • CSS3 图像边框 border-image属性

    千次阅读 2018-02-16 22:13:33
    图像边框为了实现丰富多彩的边框效果,在CSS3中,新增了 border-image属性,这个新属性允许指定一幅图像作为元素的边框。该属性的优点是,可以根据一些简单的规则,把一幅图像划分为 9 个单独的部分,浏览器会自动...
  • Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟。...
  • CSS:设置边框和背景

    万次阅读 2016-09-26 11:35:39
    应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性: 属性 说明 值 border-width 设置边框的宽度 度量单位(em、px、cm等) border-color 设置边框的颜色 英文单词、HEX、RGBa、HSLa ...
  • 去除input边框

    万次阅读 2017-05-12 18:34:37
    去除input的边框 去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性 ,其实是不能满足我们的需求的 此外还需要加上outline属性才可以 实现我们想要的样式 ** 去除边框的代码 border-width:0; ...
  • Excel中设置内边框和外边框

    千次阅读 2013-12-23 23:11:05
    1、新建一个Excel工作表,命名为“数据.xls”   2、选择需要设置内边框的表格,鼠标右键单击“设置单元格格式” ...3、选择“边框中的内部”,单击“确定”...4、同样的操作,选择“边框->外边框”,单击“确定”
  • css3实现带边框的三角形

    千次阅读 2019-06-12 16:22:02
    (1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易...
  • Table边框(内边框,外边框)使用总结

    千次阅读 2017-07-12 08:21:11
    只显示上边框    只显示下边框    只显示左、右边框    只显示上、下边框    只显示左边框    只显示右边框    不显示任何边框 void>        .表格的分隔线可

空空如也

1 2 3 4 5 ... 20
收藏数 331,851
精华内容 132,740
关键字:

边框