精华内容
下载资源
问答
  • border标签用法

    2019-10-17 14:08:15
    border标签用法 1.例一 <style> div{ width: 0px; height: 0px; border: 50px solid black; /*后面的会覆盖前面的*/ border-top-color: black; border-right-color: yel...

    border标签用法

    可以用border标签画三角形
    1.例一

    <style>
        div{
            width: 0px;
            height: 0px;
            border: 50px solid black;
            /*后面的会覆盖前面的*/
            border-top-color: black;
            border-right-color: yellow;
            border-bottom-color: red;
            border-left-color: #0d3349;
        }
    </style>
    <body>
    <div></div>
    </body>
    

    在这里插入图片描述
    2.例二

    <style>
        div{
            width: 20px;
            height: 20px;
            border: 50px solid black;
            /*后面的会覆盖前面的*/
            border-top-color: black;
            border-right-color: yellow;
            border-bottom-color: red;
            border-left-color: #0d3349;
        }
    </style>
    <body>
    <div></div>
    </body>
    

    在这里插入图片描述
    3.例三

    <style>
        div{
            width: 0px;
            height: 0px;
            border: 50px solid black;
            /*transparent表示透明*/
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: red;
            border-left-color: #0d3349;
        }
    </style>
    <body>
    <div></div>
    </body>
    

    在这里插入图片描述

    展开全文
  • border标签实现三角形效果 <div></div> div{ /*完全居中*/ position:absolute; top:50%; left:50%; margin-top:100px; margin-left:100px; width:0; height:0; border:100px solid black; /*边框透明...

    border标签实现三角形效果

    <body>
    <div></div>	
    </body>
    div{
    /*完全居中*/
    position:absolute;
    top:50%;
    left:50%;
    margin-top:100px;
    margin-left:100px;
    
    width:0;
    height:0;
    /**border-width:"100px";
    border-style:"solid";
    border-color:"red yellow blue green";**/
    border:100px solid transparent;
    border-bottom-color:black;

    注释部分:
    在这里插入图片描述

    将其他三个方向的颜色值设置为透明transparent,
    设置其中一个方向的颜色为黑色
    得到效果图如下:
    在这里插入图片描述

    展开全文
  • border属性会影响本标签内部内容定位以及该标签外部内容的定位,而outline不会,outline属性只会参与重新绘制边框样式不涉及标签的定位。 如下代码:<!... ... <title>border标签的不良影响 #frm{

    border属性会影响本标签内部内容定位以及该标签外部内容的定位,而outline不会,outline属性只会参与重新绘制边框样式不涉及标签的定位。

    如下代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>border标签的不良影响</title>
        <style>
            #frm{
                border: 2px solid red;
                float: left;
            }
            #frm *{
                margin:2px;
                font-family: "宋体";
                font-size: 16px;
            }
            #frm .label{
                border: 1px solid #00f;
                float: left;
            }
            #frm .text{
                border: 1px solid #735444;
                float: left;
            }
            #frm .label:hover{
                border: 4px solid #f00;
            }
            #frm .f2{
                float: left;
                clear: both;
            }
        </style>
    </head>
    <body>
    <div id="frm">
        <div class="f2">
            <span class="label">Label1</span>
            <div class="text">Text Area1</div>
        </div>
        <div class="f2">
            <span class="label">Label2</span>
            <div class="text">Text Area2</div>
        </div>
        <div class="f2">
            <span class="label">Label3</span>
            <div class="text">Text Area3</div>
        </div>
        <div class="f2">
            <span class="label">Label4</span>
            <div class="text">Text Area4</div>
        </div>
    </div>
    </body>
    </html>

    正常情况下:
    效果图

    border变化后的错位:、
    效果图

    为了解决上述的错位问题,可以使用outline进行设置,outline是在border所形成的边框的外面再套一层边框。outline用法同border。



    修改后代码:

    <style>
        #frm{
            outline: 2px solid red;
            float: left;
        }
        #frm *{
            margin:2px;
            font-family: "宋体";
            font-size: 16px;
        }
        #frm .label{
            outline: 1px solid #00f;
            float: left;
        }
        #frm .text{
            outline: 1px solid #735444;
            float: left;
        }
        #frm .label:hover{
            outline:  4px solid #f00;
        }
        #frm .f2{
            float: left;
            clear: both;
        }
    </style>

    使用outline属性后:


    通过比较使用border和outline的效果图可以看到,使用border属性时,class属性为label标签以及class属性为text的标签之间边框的距离比使用outline属性后要变宽。因为margin属性是从border所设置的边框外面第一个像素算起的,使用outline属性时没有设置border,则border的边框宽度为0,即两个标签之间的间距在没有使用border标签的时候,比使用了border标签的时候少了2px。
    虽然outline属性效果很好,但不是所有的浏览器都支持,如IE6.0以下的浏览器就不支持这一属性的设置。
    另外也不可使用outline来设置圆角效果,所以,如果想使用border属性而又不想使用其他标签定位出错,可以同时设置margin属性。
    下面代码是结合了margin和border属性同时设置,该程序在border变化的情况下,配合margin属性的设置来达到标签位置固定的效果。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>border标签的不良影响</title>
        <style>
            #frm{
                /*outline: 2px solid red;*/
                border: 2px solid red;
                float: left;
            }
            #frm *{
                margin:4px;
                font-family: "宋体";
                font-size: 16px;
            }
            #frm .label{
                border: 1px solid #00f;
                /*outline: 1px solid #00f;*/
                float: left;
                border-radius: 4px;
            }
            #frm .text{
                border: 1px solid #735444;
                /*outline: 1px solid #735444;*/
                float: left;
            }
            #frm .label:hover{
                border: 4px solid #f00;
                margin:1px;
                /*outline:  4px solid #f00;*/
            }
            #frm .f2{
                float: left;
                clear: both;
            }
        </style>
    </head>
    <body>
    <div id="frm">
        <div class="f2">
            <span class="label">Label1</span>
            <div class="text">Text Area1</div>
        </div>
        <div class="f2">
            <span class="label">Label2</span>
            <div class="text">Text Area2</div>
        </div>
        <div class="f2">
            <span class="label">Label3</span>
            <div class="text">Text Area3</div>
        </div>
        <div class="f2">
            <span class="label">Label4</span>
            <div class="text">Text Area4</div>
        </div>
    </div>
    </body>
    </html>

    border加margin重新设置:
    效果图

    展开全文
  • 经常在做网页导航栏的时候,有二级菜单的时候,有一个小三角形表示下拉的,其实很多基础的图形我们都是可以直接用代码写出来的,下面来简单介绍几个栗子叭~ 1.三角形 .triangle1{ ... border-left-col...

    经常在做网页导航栏的时候,有二级菜单的时候,有一个小三角形表示下拉的,其实很多基础的图形我们都是可以直接用代码写出来的,下面来简单介绍几个栗子叭~

    1.三角形

    .triangle1{
      	width: 0;
     	height: 0;
     	border: 50px solid #FBAAC3;
      	border-top-color: transparent;
      	border-left-color: transparent;
      	border-right-color: transparent;
      	border-top: none;
      }
    .triangle2 {
        width: 0;
     	height: 0;
        border: 50px solid #FBAAC3;
        border-width: 30px 50px;
        border-top-color: transparent;
        border-right-color: transparent;
    }
    .triangle3{
        width: 0;
     	height: 0;
        border: 50px solid #FBAAC3;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
     }
    

    三角形1
    三角形2
    三角形3
    小松树小松树
    在这里插入图片描述

    2. 菱形

        .diamond {
          width: 0;
          height: 0;
          border: 40px solid #FBAAC3;
          transform: rotate(45deg);
        }
    

    菱形1
    制作菱形还可以用两个盒子来制作,第一个盒子的下边框和第二个盒子的上边框

        .diamond2 {
          width: 0;
          height: 0;
          border: 40px solid #FBAAC3;
        }
        .diamond2.p1 {
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }
        .diamond2.p2 {
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }
    
    

    3.梯形

        .trapezoid {
          width: 100px;
          height: 0;
          border: 40px solid #FBAAC3;
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top: none;
        }
    

    在这里插入图片描述
    border可以玩出很多花样,可以自己打开开发者工具改变盒子的宽高,调出不一样的图形,自己去试试吧!

    展开全文
  • html中border标签

    千次阅读 2011-08-08 10:24:07
    边框样式包括 设置上边框:border-top :对应手册 http://www.divcss5.com/shouce/c_bordertop.shtml 设置下边框:border-bottom :对应手册http://www.divcss5.com/shouce/c_
  • tr标签单独添加border

    2019-10-21 11:50:38
    直接定义table tr{ border-bottom: 1px solid #e5e5e5;...必须在tr外层的table标签添加border-collapse: collapse;属性 table{ border-collapse: collapse; } table tr{ border-bottom: 1px solid #e5e5e5;...
  • IE6下input标签border的样式border:none;是不起作用的!要设置border:0px;才行! 转载于:https://www.cnblogs.com/JerryWang24/p/3670962.html
  • 今天上午学习了border、padding、标签的转换,其中border是边框,样式是border:1px solid red;这个代码的意思是盒子四周有1像素的红色实线边框。也可以当独的设置其中一边的边框,border-left:左边框,bordr-right...
  • 给input设置border-radius效果时一定要先设置border属性,否则会出现左上部有阴影的效果。 转载于:https://www.cnblogs.com/hanhaihu/p/5278056.html
  • CSS|标签border-radius后出现阴影凹陷 解决办法: 给标签加一个border样式,凹陷阴影就会消失 例: <style> .no { height: 25px; width: 200px; border-radius: 5px; } .yes { height: 25...
  • 标签border-image...

    2017-09-26 20:18:52
    我有一个较好的文章推荐。。。border-image…详解
  • 标签border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框。 注释:默认地,图像是没有边框的(除非图像在 a 元素内部)。 浏览器通常会把代表超链接的图像(例如包含在 <a> 标签中的...
  • img 元素可定义一副图像。...img> 标签没有结束标签。...在 HTML 4.01 中,不赞成使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。在 XHTML 1.0 Strict DTD 中,不支持 image...
  • CSS中button标签自带border属性

    千次阅读 2018-01-21 20:35:46
    问题描述: ...下图中两个button各占50%,却上下左右都有缝隙存在。...2.用a标签替换button标签 修改后效果见下图: PS: <input type="button /> 会遇到和button标签同样的问题
  • <td xss=removed></td> 标签 中 的内容为空时,即 :<td xss=removed></td> ,她的样式 border 失效。 解决方法:   以上这篇 标签border 样式在浏览器中显示不出来的解决方法就是小编分享给大家的全部内容了...
  • 在实现Banner和冒泡式提醒前,我们可以先了解一下border的实现规律,语言不好表述,直接上代码和效果图。 width: 0; height: 0; border-top:20px solid; border-left:20px solid red; border-right:20px solid ...
  • a标签嵌套img标签在IE7,8下显示带有蓝色边框border的解决方法 今天有同事问到我,为什么他的a标签嵌套img标签在IE8以下的浏览器显示会有个边框,怎么解决会好点?经过我做了个demo之后,发现,原来是浏览器本身的...
  • 为了实现鼠标上移到标签时来改变 border 的width 以及 color 实际操作的时候发现 标签 的位置会发生晃动 主要原因是 border 的宽度增加 导致了标签位置的变动 解决方法为: 在 css 中添加一个 box-sizing: border...
  • 今天在页面布局时遇到了个问题:div布局的总是比table的多两个像素,用火狐的查看元素可以清楚地看到用div的多出了两个像素,因为设定了border:#cbcdca solid 1px;把border宽度设置为0则可以了,把border-left设置0...
  • 1、将表格的单元格边框合并border-collapse:collapse;将表格的单元格边框合并如:td{border:1px solid #FFF}table{border-collapse:collapse}2、鼠标形状cursor:pointer;(手型)3、在HTML中,a:link;a:visited;a:...
  • 默认img标签,有一个1px的边框 img{ border: 0; } 转载于:https://www.cnblogs.com/mingerlcm/p/9138079.html
  • img标签加背景图片始终有border? 用img标签来设置背景图片,无论你怎么给border加样式都会发现一条摆脱不掉的边框,这是浏览器为了识别img标签自带的一个类似于“占位符”的标记,就是为了告诉这里有张图片。没啥...
  • 1.在CSS样式表中并不能直接对表格元素的border元素进行设定,那么要想实现像Excel表格样式的表格怎么办呢?只能对表格和单元格分别加边框来实现,具体的是:对表格显示上边框和左边框,而让每个单元格显示下边框和...
  • 入下图,白色那行border在浏览器中刷新没效果,删除后显示蓝色块 ![图片说明](https://img-ask.csdn.net/upload/201501/15/1421301928_641420.jpg)
  • 如题,设置div border-top无效,该如何解决?????????????????????????

空空如也

空空如也

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

border标签