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

    2013-11-04 10:54:00
    定义border的时候,可以直接用border属性,也可接用border属以分别用border-width,border-style,border-color定义。如果是用border定义的话,要把三个子属性的值全部写出,而且中间用空格分隔,不能用其他的字符。 ...

    border属性有三个子属性:线宽 线型 颜色。
    定义border的时候,可以直接用border属性,也可接用border属以分别用border-width,border-style,border-color定义。如果是用border定义的话,要把三个子属性的值全部写出,而且中间用空格分隔,不能用其他的字符

    例如:

    border:1px solid 3300FF;
    border属性:线宽 线型 颜色 
    border-width 定义边框线的宽度
    border-color 定义边框颜色
    solid 定义边框实线的样式

    转载于:https://www.cnblogs.com/goodMadman/p/3406032.html

    展开全文
  • 微信小程序 关于边框border的属性以及border边框不显示的问题‘ 欲做出这样的界面效果: 思路如下: 可以设置一个盒子,盒子的内容是“个人中心”;再加上盒子最底下的边框border-bottom就可以了。 代码如下: <...

    微信小程序 关于边框border的属性以及border边框不显示的问题‘

    欲做出这样的界面效果:
    在这里插入图片描述
    思路如下:
    可以设置一个盒子,盒子的内容是“个人中心”;再加上盒子最底下的边框border-bottom就可以了。
    代码如下:

    	<view class="top-background">
    		<text class="top-text">个人中心</text>
    	</view>
    
    
    .top-background{
      width:100%;
      height:80rpx;
      margin-top:10rpx;   
      justify-content: center;
      align-items: center;
      border-bottom-color:#BBBBBB;
      display: flex;
      flex-direction: column;
    }
    
    .top-text{
      color: #2A2A2A;
      font-size: 35rpx;
      font-family: Roboto-regular;
      text-align: center;
      position: absolute;
    }
    

    效果如下:
    在这里插入图片描述
    没有显示下边框!

    原因在于只定义了下边框的颜色color,没有定义其style
    若将部分样式改为如下代码,加上style的定义:

      /* border-bottom:1px solid #BBBBBB; */
      /* border-bottom-width: 1rpx; */
      border-bottom-style: solid;
      border-bottom-color: #BBBBBB;
    

    在这里插入图片描述
    即使没有定义width,也会取默认值medium,**相当于3px,**另外thin为1px,thick为5px。即还是会显示下边框。

    若不定义style,则相当于border-bottom-style:none

      border-bottom-style: none;
      border-bottom-color: #BBBBBB;
    

    我们可以将border-bottom的三个属性统一写成一句

      border-bottom:1rpx solid #BBBBBB;
    

    在这里插入图片描述
    这就满足我们的需求了!
    总结:

    • 若不定义border的style,相当于style属性被设置为none,故不会显示border;
    • 不定义border的width,有默认值medium,相当于3px;
    • border属性可以统一写成一句如 border: 5px solid black;

    希望这篇文章对你有帮助, 欢迎一起讨论学习交流!

    展开全文
  • border的属性及写法: 属性 含义 solid 实线 dotted 点线 dashed 虚线 double 双线 单项写法及效果演示: (后面有完整代码) 1.实线 // 1. 实线:solid .border1{ border: 1px solid #666; }...

    border的属性及写法:

    属性 含义
    solid 实线
    dotted 点线
    dashed 虚线
    double 双线
    单项写法及效果演示:

    (后面有完整代码)

    1.实线

     // 1. 实线:solid 
         .border1{
              border: 1px solid #666; 
          }
    

    实线效果:
    在这里插入图片描述

    2.点线

     //  2. 点线:dotted 
          .border2{
               border: 1px dotted #666;
          }
    

    点线效果:
    在这里插入图片描述

    3.虚线

     //  3. 虚线:dashed 
         .border3{
                 border: 1px dashed #666;
          }
    

    虚线效果:
    在这里插入图片描述

    4.双线

    注意:双线的边框宽度不能小于3px

     //  4. 双线:double 
          .border4{
                 border: 3px double #666;
           }
    

    双线效果:
    在这里插入图片描述

    5.混合使用(一)

    上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线

        .border5{
               /* 四个值时边框顺序:1上 2右 3下 4左 */
               border-style:dotted solid double dashed;
           }
    

    混合使用(一)效果:
    在这里插入图片描述

    6.混合使用(二)

    上边框是点状
    右边框和左边框是实线
    下边框是双线

         .border6{
               /* 三个值时边框顺序:1上 2左右 3下 */
              border-style:dotted solid double;
           }
    

    混合使用(二)效果:
    在这里插入图片描述

    7. 混合使用(三)

    上边框和下边框是点状
    右边框和左边框是实线

        .border7{
               /* 两个值时边框顺序:1上下 2左右*/
             border-style:dotted solid;
           }
    

    混合使用(三)效果:
    在这里插入图片描述

    完整代码:

       <!DOCTYPE html>
    	<html lang="en">
    		<head>
    		    <meta charset="UTF-8">
    		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    		    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    		    <title>border属性的完整代码</title>
    		    <style>
    		        * {
    		            margin: 0;
    		            padding: 0;
    		        }
    		        body {
    		            background: #E8F2FC;
    		            padding-top: 50px;
    		        }
    		        div {
    		            width: 60%;
    		            height: 50px;
    		            line-height: 50px;
    		            margin: 40px auto;
    		           text-align: center
    		        }
    		        /* 1. 实线:solid */
    		        .border1{
    		            border: 1px solid #666; 
    		        }
    		        /* 2. 点线:dotted */
    		        .border2{
    		             border: 1px dotted #666;
    		        }
    		        /* 3. 虚线:dashed */
    		        .border3{
    		             border: 1px dashed #666;
    		        }
    		        /* 4. 双线:double */
    		        .border4{
    		             border: 3px double #666;
    		        }
    		        /* 5. 混合使用(一) */
    		        .border5{
    		            /* 四个值时边框顺序:1上 2右 3下 4左 */
    		            border-style:dotted solid double dashed;
    		        }
    		        /* 6. 混合使用(二) */
    		        .border6{
    		            /* 三个值时边框顺序:1上 2左右 3下 */
    		           border-style:dotted solid double;
    		        }
    		        /* 7. 混合使用(三) */
    		        .border7{
    		            /* 两个值时边框顺序:1上下 2左右*/
    		          border-style:dotted solid;
    		        }
    		    </style>
    		</head>
    		<body>
    		    <!-- 1.实线 -->
    		    <div class="border1"> 1.实线边框</div>
    		    <!-- 2.点线 -->
    		    <div class="border2"> 2.点线边框</div>
    		    <!-- 3.虚线 -->
    		    <div class="border3"> 3.虚线边框</div>
    		    <!-- 4.虚线 -->
    		    <div class="border4"> 4.双线边框</div>
    		    <!-- 5.混合使用 -->
    		    <div class="border5"> 5.混合使用(一)</div>
    		    <!-- 6.混合使用 -->
    		    <div class="border6"> 6.混合使用(二)</div>
    		    <!-- 7.混合使用 -->
    		    <div class="border6"> 7.混合使用(三)</div>
    		    
    		</body>
    	</html>
    

    整体效果演示:
    在这里插入图片描述

    展开全文
  • html中border的属性设置

    2012-10-10 18:30:00
    border有如下属性border-widthborder-styleborder-color 设置方法: p { border:5px solid red; } 如果不设置其中某个值,也不会出问题,比如: border:solid #ff0000; 这三个值也可以分开设置: ...

    border有如下属性:

    border-widthborder-styleborder-color

    设置方法:

    p
      {
      border:5px solid red;
      }
    


    如果不设置其中的某个值,也不会出问题,比如:

    border:solid #ff0000; 

    这三个值也可以分开设置:

    border-width:thin medium thick 10px;
    上边框是细边框右边框是中等边框下边框是粗边框左边框是 10px 宽的边框
    border-width:thin medium thick;
    上边框是 10px右边框和左边框是中等边框下边框是粗边框
    border-width:thin medium;
    上边框和下边框是细边框右边框和左边框是中等边框

    设置边框圆角:

    border-radius:4px;


     

    转载于:https://www.cnblogs.com/chenjianhong/archive/2012/10/10/4144918.html

    展开全文
  • border缩写属性

    2020-12-07 12:46:03
    设置的属性分别(按顺序):border-width, border-style,和border-color. 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的。 border其他属性用法: 单个边的复合样式 border-left:thick double #ff...
  • border属性

    2020-09-30 11:17:14
    border 简写属性在一个声明设置所有边框属性border: width style color 可以按顺序设置如下属性border-width 1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等) 2.或者使用 3 个关键字之一...
  • border 简写属性在一个声明设置所有边框属性。 可以按顺序设置如下属性border-width border-style border-color 如果不设置其中某个值,也不会出问题,比如 border:solid #ff0000; 也是允许。 ...
  • 神奇的border属性

    2016-04-05 22:15:50
    这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的标签影响到你的视觉神经,那
  • 对table的border属性和css border属性刚开始使用时有些混乱,都是对table的边框进行设置,那么有什么区别呢?写了段简短的table比较...另一个表格改了头部的属性设置: 结果如下: 结论是:border属性规...
  • CSS border 属性

    2019-08-29 15:54:19
    最近写网页,用到了border属性 了解不是很多,就整理了一下 border属性就是边框属性 实例 p{ border:5px soild #000 ; } 分三个点: border-width 指定边框宽度 boder-style 指定边框样式 border-color ...
  • CSS解读之border属性

    千次阅读 2013-12-28 10:13:44
    之前刚学习CSS的时候,对于border的属性渲染结果的理解很想当然,一开始就自然而然的认为border属性就是给容器外边加上了四条直线,这种理解一直伴随我很长的时间,不过由于一般对于border属性的运用都很普通,因此...
  • WPF Border各种属性介绍

    千次阅读 2017-08-27 15:04:52
    WPF Border各种属性介绍 WPF Border作为一种控件,是非常常用一种开发控件。其中属性包括:Background;BorderBrush;BorderThickness;CornerRadius等等。 WPF是一款专门针对图形界面处理开发工具。在这款...
  • CSS:不可思议的border属性

    千次阅读 2014-11-16 00:23:43
    译文:不可思议CSS border属性 译者:dwqs 在CSS中,其border属性有很多规则。对于一些事物,例如三角形或者其它图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了...
  • CSS中的border属性

    2019-07-11 09:32:54
    第一个值:border-width:边框宽度; 第二个值:border-style:边框样式; 第三个值:border-color:边框颜色;(transparent:透明色) 分开写: border-width: 1px; border-color : blue; ...
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...
  • DataGridView.BorderStyle 属性

    千次阅读 2016-12-20 10:40:40
    DataGridView 边框线样式是通过 DataGridView.BorderStyle 属性来设定。 BorderStyle 属性设定值是一个 BorderStyle 枚举: FixedSingle(单线,默认)、Fixed3D、None。 2) 单元格边框线样式...
  • Border属性

    2014-02-27 15:56:50
    边界是众所周知,有什么新东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确(有待考究...border: 1px solid bl
  • 文章目录一、Border简介二、常用属性三、补充案例 一、Border简介 Border是一个装饰控件,此控件绘制一个边框、一个背景,在 Border 中只能有一个子控件,但它子控件是可以包含多个子控件。 二、常用属性 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,004
精华内容 6,001
关键字:

border的属性