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

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

    最近写网页,用到了border属性
    了解的不是很多,就整理了一下

    border属性就是边框属性

    实例

    p{
    	border:5px soild #000 ;
    }
    

    分三个点:

    1. border-width 指定边框的宽度
    2. boder-style 指定边框的样式
    3. border-color 指定边框的颜色
      还有从父级元素继承过来的inherit

    border-width

    可以设置一到四个值
    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    属性值
    • thin:定义细的边框
    • medium:默认,定义中等的边框
    • thick:定义粗的边框
    • length:允许你自定义边框的宽度
    • inherit:规定应该从父级元素继承边框宽度

    border-style

    border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值

    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    属性值
    • soild:实线
    • dotted:点状
    • double:双线
    • dashed:虚线
    • none:定义无边框
    • hidden:于none相同,应用表时除外,对于表,hidden用于解决边框冲突

    border-color

    border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    注意请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

    属性
    • color :在CSS颜色值查找颜色值的完整列表
    • transparent:边框颜色透明,这是默认值
    • inherit:从父级元素继承
    展开全文
  • css border属性

    2019-03-27 23:24:13
    border属性 border-width: 10px; 边框粗细程度:值支持像素,数字,关键字thin(1px),medium(默认3px) ,thick(5px),不支持百分比; border-style:solid; 边框的样式:值有solid(实线)、dashed(虚线)、dotted...

    border属性

    • border-width: 10px;
      边框粗细程度:值支持像素,数字,关键字thin(1px),medium(默认3px) ,thick(5px),不支持百分比;
    • border-style:solid;
      边框的样式:值有solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、inset(3D凹边)、outset(3D凸边)、ridge(菱形边框)、groove(3D凹槽)
    • border-color:#000;
      边框颜色:值支持颜色的名字red、透明transparent、十六进制值#ff0000、rgb值rgb(255,0,0)、inherit继承

    上面三个特性可以简写为一句话:

    border:10px solid #000;
    

    边框有四个边,可以分别定义不同的属性值:

    border-top:10px dotted red;
    border-right:10 dashed transparent;//颜色透明
    border-bottom:0px solid #ff00;
    border-left:2 inset rgb(255,0,0);
    
    展开全文
  • css border 属性

    2015-03-13 19:30:23
    与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用) dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。...

    none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
    dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
    solid :  实线边框(常用)


    solid      或者  dash     设置 高度  px;



    #divcss5{height:100px;width:200px;border:1px solid #F00}

    记住 ::  border:1px solid #F00;

     大小

      实虚  线

    颜色



    展开全文
  • CSS Border属性制作小三角,需要的朋友可以参考下。
  • 下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS border 属性 用于设置四个边框样式 直接看使用方法: .sjx:before{ content: ''; display: inline-block; width: 100px; height: 100px; background: #FFC; border-top: 80px solid #0F0; border-ri....

    CSS border 属性  用于设置四个边框样式

    直接看使用方法:

    .sjx:before{
        content: '';
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #FFC;
        border-top: 80px solid #0F0;
        border-right: 80px solid #09C;
        border-bottom: 80px solid #9F9;
        border-left: 80px solid #FC3;
    }

    可以看到块状元素宽度和高度都是100px,四个边框都是80px,边框的绘制是梯形。

    那么假如块状元素的宽度和高度变成0px的时候,四个边框就变成了三角形。

    .sjx:before{
        content: '';
        display: inline-block;
        width: 0px;
        height: 0px;
        background: #FFC;
        border-top: 80px solid #0F0;
        border-right: 80px solid #09C;
        border-bottom: 80px solid #9F9;
        border-left: 80px solid #FC3;
    }

    如果仅仅写一个边框的话,边框又变成一个矩形:边框下面的块状元素就是20px * 20px

    .sjx:after{
    	content: '';
    	display: inline-block;
    	width: 20px;
    	height: 20px;
    
    	border-top: 100px solid #0F0;
    	position: relative;
    	top: 2px;
    	left: 10px;
    }

    显示一个小三角形:

    .sjx:after{
    	content: '';
    	display: inline-block;
    	width: 0px;
    	height: 0px;
    	border: 8px solid transparent;
    	border-top: 8px solid #212121;
    	position: relative;
    	top: 2px;
    	left: 10px;
    }

    显示其他的图标:

    .sjx:after{
    	content: '';
    	display: inline-block;
    	width: 0px;
    	height: 0px;
    /*	border: 8px solid transparent;*/
    	border-top: 80px solid #212121;
    	border-right: 180px solid red;
    	position: relative;
    	top: 2px;
    	left: 10px;
    }

    再比如:

    .sjx:after{
    	content: '';
    	display: inline-block;
    	width: 0px;
    	height: 0px;
    /*	border: 8px solid transparent;*/
    	border-top: 80px solid #212121;
    	border-right: 180px solid red;
    	border-bottom: 100px solid #FC3 ;
    	position: relative;
    	top: 2px;
    	left: 10px;
    }

     

    可以看到,灵活使用border可以做出很多图案!

     

     

     

     

    展开全文
  • border -- 定义四个边的宽度,样式,颜色 取值:[ <border> || <border> || <border> ] | inherit [ <border> || <border> || <border> ]: 边框宽度,样式,颜色属性中的一个或多个 inherit: 继承
  • CSS border 属性及用border画各种图形

    千次阅读 2016-08-28 10:58:10
    CSS border 属性 定义和用法 border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性border-widthborder-styleborder-color 如果不设置其中的某个值,也不会出问题,比如 border:solid ...
  • 不可思议的CSS border属性----纯CSS制作三角形
  • border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性border-width border-style ...CSS border-collapse 属性 border-collapse 属性设置表格的边框是否被合并为一个...
  • Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下
  • css border属性简写

    千次阅读 2014-08-05 15:27:38
    CSSborder属性的定义:  Value: [ || || ] | inherit  Initial: see individual properties  Applies to: all elements  Inherited: no  Percentages: N/A  Media: visual  Computed value: see ...
  • 理解css border属性

    2014-12-03 11:02:02
    css不规则图形实现原理及代码 googlepaly网站tabs选项卡样式是css实现的斜边,接下来简单介绍一下自己理解的其中的原理,感兴趣的朋友可以参考下,希望可以帮助到 ...1、理解border的原理
  • 巧妙用css border属性实现规则图形

    千次阅读 2014-12-02 15:36:57
    首先:一个例子: #div1 {  height:20px;... border-color:#FF9600 #3366ff #12ad2a #f0eb7a;  border-style:solid;  border-width:20px; } 此代码的效果图为: 中间白色为宽高各为20p
  • 主要介绍了CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的小伙伴们可以参考一下
  • 对table的border属性css border属性刚开始使用时有些混乱,都是对table的边框进行设置,那么有什么区别呢?写了段简短的table比较了下: DemensionValue 位置120 结果如下: 另一个...
  • CSS边框border属性

    2019-01-29 16:26:57
    CSS border 属性允许你规定元素边框的样式、宽度和颜色。 CSS边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。 元素外边...
  • DIV 区块或 span 的边框,也可以应用到其他的网页元素的边框上,例如网页标题的边框、图片的边框(img border)… 等,所有的主流浏览器都支援 CSS border 属性CSS border 语法介绍: CSS Code复制内容到剪贴板...
  • CSS border-collapse 属性

    2020-10-30 17:45:29
    CSS border-collapse 属性
  • 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有非常多的规则。对于一些事物,比如三角形或者其他的图像,我们仍然使用图片取代。可是如今就不须要了,我们能够用CSS形成一些基本图形。我...
  • CSS 边框 border属性

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

    2016-05-21 09:46:00
    CSS border边框属性教程(color style) CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇 一、CSS 边框基础知识 - TOP CSS 边框即CSS border是控制对象的边框边线宽度、颜色...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,488
精华内容 4,195
关键字:

cssborder属性