精华内容
下载资源
问答
  • div边框线上添加文字

    万次阅读 2012-11-01 17:17:25
    div边框线上添加文字[转] New Document * {  font-size:12px;  margin:0;  padding:0;  }  fieldset.test {  padding:10px;  margin:10px;  width:270px;  color:#333;

    div边框线上添加文字[转]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <style type="text/css">
    * {
        font-size:12px;
        margin:0;
        padding:0; 

    fieldset.test {
        padding:10px;
        margin:10px;
        width:270px;
        color:#333; 
        border:#06c solid 1px;

    legend {
        color:#06c;
        padding:5px 10px;
        font-weight:800; 
        /*background:white;*/

    ul {
        list-style-type: none;
        margin:8px 0 4px 0;

    li {
        margin-top:4px;
    }
    </style>
    </HEAD>

    <BODY>
    <fieldset style="width:300px; height:100px;"> 
            <legend>生产信息 </legend> 
            <div>试一下 </div> 
        </fieldset>
    <fieldset class="test"> 
    <legend>CSS网页布局</legend> 
        <ul> 
       <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
       <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
       <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
       <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> 
        </ul> 
    </fieldset>
    </BODY>
    </HTML>

    如下图:

    效果二:


    展开全文
  • DIV边框动态效果

    2018-05-21 13:52:39
    鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框线动态...
  • div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效
  • div模块边框中间添加文字(边框线在文字两边横穿文字) 需求图如下: 其他三个边框可通过设置border完成,包含文字的一边可以分布实现:左边线 + 文字 + 右边线 html: <div class="pop"> <div ...

    div模块边框中间添加文字(边框线在文字两边横穿文字)

    需求图如下:

     其他三个边框可通过设置border完成,包含文字的一边可以分布实现:左边线 + 文字 + 右边线

    html:

    <div class="pop">
        <div class="pop_title">
            <span class="line_left"></span>
            <span class="title">控制器主网络配置</span>
            <span class="line_right"></span>
        </div>
    
        <div>
        .... //框内内容
        </div>
    </div>

    css:

    .pop{
        border: 1px #bebebe solid;
        border-top-width: 0px;
    }
    .pop_title {
        height: 45px;
        text-align: center;
        margin-top: -13px;  //由于标题在整个pop内,所以需要设置向上位置,使标题上的线和pop的边框对齐
    }
    .pop_title .line_left {
        display: inline-block;
        width: 10px;
        border-top: 1px solid #ccc ;
    }
    .pop_title .line_right {
        display: inline-block;
        width: calc(100% - 70px);
        border-top: 1px solid #ccc ;
    }
    .pop_title .title{
        color: #000;
        vertical-align: middle; //此处也可根据情况设置为 百分数或px值 调整边框线在文字中部
    }

     

    展开全文
  • div 边框

    2009-07-07 19:04:12
    1. 外凸边框: 代码: 日志文字 代码说明: 蓝色部分为可修改部分,一一说明: 四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适; 四个outset表示边框类型为"凸起",如果都改成...
    1. 外凸边框:
    代码:
    <DIV style="BORDER-RIGHT: 3px outset; BORDER-TOP: 3px outset; BACKGROUND: #ffffff; BORDER-LEFT: 3px outset; WIDTH: 100%; BORDER-BOTTOM: 3px outset; HEIGHT: 100%" align=left>日志文字</DIV>

    代码说明:
    蓝色部分为可修改部分,一一说明:
    四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适;
    四个outset表示边框类型为"凸起",如果都改成inset或者double,就分别是凹陷边框和双线边框的效果,其他效果下文会给出完整代码;
    WIDTH: 100%; 和HEIGHT: 100%表示这个框的宽度占日志宽度的百分之百,当窗口伸缩的时候,框的宽度也会随着伸缩,HEIGHT表示高度,另外,还有一种表示方法以px为单位的,表示单位为象素,例如:WIDTH: 355px 表示框的宽度为355象素,不同的版式,日志宽度是不一样,可参考这里给定的值, 一般的情况下,用百分比表示就可以了,但是有的时候需要用象素来确定大小,见机行事吧;
    align=left表示框内内容的排列方式为左对齐,把left分别改成center或right分别为居中对齐和右对齐,如果想左对齐的话,可以把align=left删掉,缺省情况下是左对齐;
    ffffff表示框内的背景色,ffffff表示白色(000000表示黑色),颜色值可参考这个表来选择,另外,将#ffffff改为transprant即为透明背景,个人认为透明背景比较常用;为了方便复制粘贴,给出透明背景的边框代码如下:(框内红色部分为代码)
    <DIV style="BORDER- RIGHT: 3px outset; BORDER-TOP: 3px outset; BACKGROUND: transprant; BORDER-LEFT: 3px outset; WIDTH: 100%; BORDER-BOTTOM: 3px outset; HEIGHT: 100%" align=left>日志文字</DIV> 日志文字为框内的日志内容,没有必要在代码里编辑,回到普通设计模式,双击生成的框,即可进入框内编辑文字。
    2. 内凹边框:
    代码:
    <DIV style="BORDER-RIGHT: 3px inset; BORDER-TOP: 3px inset; BACKGROUND: #ffffff; BORDER-LEFT: 3px inset; WIDTH: 100%; BORDER- BOTTOM: 3px inset; HEIGHT: 100%" align=left>日志文字</DIV>
    透明背景内凹边框代码:
    <DIV style="BORDER- RIGHT: 3px inset; BORDER-TOP: 3px inset; BACKGROUND: transprant; BORDER-LEFT: 3px inset; WIDTH: 100%; BORDER-BOTTOM: 3px inset; HEIGHT: 100%" align=left>日志文字</DIV> 代码说明:
    类似上面的,略……
    3. 双线边框:
    <DIV style="BORDER-RIGHT: 3px double #000000; BORDER-TOP: 3px double #000000; BACKGROUND: #ffffff; BORDER-LEFT: 3px double #000000; WIDTH: 100%; BORDER-BOTTOM: 3px double #000000; HEIGHT: 100%" align=left>日志文字</DIV> 透明背景双线边框代码:
    <DIV style="BORDER-RIGHT: 3px double #000000; BORDER-TOP: 3px double #000000; BACKGROUND: transprant; BORDER-LEFT: 3px double #000000; WIDTH: 100%; BORDER-BOTTOM: 3px double #000000; HEIGHT: 100%" align=left>日志文字</DIV>其实,前面的边框也可以像双线边框一样设置颜色,但个人觉得,凹凸效果的颜色还是默认比较好。
    4. 虚线边框:
    <DIV style="BORDER-RIGHT: 2px dashed #000000; BORDER-TOP: 2px dashed #000000; BACKGROUND: #ffffff; BORDER-LEFT: 2px dashed #000000; WIDTH: 100%; BORDER-BOTTOM: 2px dashed #000000; HEIGHT: 100%" align=left>日志文字</DIV> 透明背景虚线边框代码:
    <DIV style="BORDER-RIGHT: 2px dashed #000000; BORDER-TOP: 2px dashed #000000; BACKGROUND: transpant; BORDER-LEFT: 2px dashed #000000; WIDTH: 100%; BORDER-BOTTOM: 2px dashed #000000; HEIGHT: 100%" align=left>日志文字</DIV>5. 沟线立体效果边框
    <DIV style="BORDER-RIGHT: 7px groove; BORDER-TOP: 7px groove; BACKGROUND: transprant; BORDER-LEFT: 7px groove; WIDTH: 100%; BORDER-BOTTOM: 7px groove; HEIGHT: 100%" align=left>日志文字</DIV>个人认为这个边框的背景色最好用透明,而且边框的粗细值不能太小,否则效果不明显
    6. 脊线立体效果边框
    <DIV style="BORDER-RIGHT: 7px ridge; BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; BORDER-LEFT: 7px ridge; WIDTH: 100%; BORDER-BOTTOM: 7px ridge; HEIGHT: 100%" align=left>日志文字</DIV>

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xuwenwu/archive/2007/03/27/1542298.aspx

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xuwenwu/archive/2007/03/27/1542298.aspx
    展开全文
  • div边框设置

    千次阅读 2013-04-25 10:54:59
    彩色边框 :这里使用的是蓝色"blue" 日志文字 二.双线边框:这里使用的是"red" 日志文字 三.滚动边框 :这里的颜色比较复杂 大家可以把代码复制下来后试 style='  color: #336699;...

    一.彩色边框 :这里使用的是蓝色"blue"

    <div STYLE="border-style:solid;border-width:5pt; border-color:颜色">日志文字</div>

    二.双线边框:这里使用的是"red"

    <div STYLE="border-style:Double;border-width:5pt; border-color:颜色">日志文字</div>

    三.滚动边框 :这里的颜色比较复杂

    大家可以把代码复制下来后试

    <DIV align=left 
    style=' 
    color: #336699; 
    background-color:#dcdcdc; 
    border: solid 3px blue; 
    width: 450px; 
    height: 150px; 
    overflow: scroll; 
    scrollbar-face-color: #ffd700;
    scrollbar-shadow-color: #e0ffff;
    scrollbar-highlight-color: #fa8072;
    scrollbar-3dlight-color: #ff0000;
    scrollbar-darkshadow-color: #afeeee;
    scrollbar-track-color: #ffb6c1;
    scrollbar-arrow-color: #e6e6fa;
    '>日志文字</DIV>

    四.立体边框
    <div STYLE="border-style:groove;border-width:5pt; border-color: green
    ">日志文字</div>

    说明:

    1.Border-left-style:solid (double, groove, ridge, inset, outset)边框样式

    除了上面的四种是我现在在这里试验可以用的

    其他的可能还可以用

    以后我再增加

    基本上就是直接修改以下代码

    <div STYLE="border-style:式样;border-width:框的高度pt; border-color: 颜色">日志文字</div>

     

    2.Border-left-color: #xxxxxx边框颜色

    颜色的代码我这里就暂时不提供了

    大家可以在网上找

    不过提供一个找代码的方法

    一样开启发表日志的选项

    在文字颜色的地方选取更多颜色后

    右下方就为颜色代码

    但是要特别注意"#"不要忘记了哦

     

    3.Border-left-width: 数字pt 边框粗细

    展开全文
  • “创建了一个div,给其设置padding后, 此div内的hr标签无法抵达div左右边框线”的解决方法 问题: 创建了一个div,在设置padding(内填充)后, 此div内的hr水平方向无法抵达div左右边框线 效果: 代码: HMTL CSS...
  • 绘制一个表格后,已经为点击表格事件添加了触发边框的效果,边框是用div加的,现在问题是,想实现只有当鼠标悬停在边框任意位置,才能进行拖动表格,若鼠标停在框选区域内,则不会触发拖动事件,那么要怎么判断鼠标...
  • 几种常见的DIV边框样式

    千次阅读 2015-02-13 12:54:50
    几种常见的DIV边框样式,无边框、点线式边框、破折线式边框、直线式边框、双线式边框、槽线式边框、脊线式边框、内嵌效果的边框、突起效果的边框等。
  • 隐藏div某一边的边框线

    千次阅读 2019-03-19 15:17:56
    border-top:none; border-bottom:none; border-right:none; 上下左右都可以
  • 1. 外凸边框:效果:日志文字代码:日志文字代码说明:蓝色部分为可修改部分,一一说明:四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适;四个outset表示边框类型为"凸起",如果都改成inset或者double,就...
  • div显示边框显示一条线

    千次阅读 2018-10-18 15:44:36
    div style=" border-bottom:solid 1px green; border-left:solid 1px gray; border-right:solid 1px blue; border-top:solid 1px red"&gt;&lt;/div&gt; 代码解释:border-...
  • DIV边框样式设置

    万次阅读 2008-12-29 19:16:00
    1. 外凸边框: 效果:日志文字 代码:日志文字 代码说明: 蓝色部分为可修改部分,一一说明: 四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适; 四个outset表示边框类型为"凸起",如果都改成inset...
  • 边框样式  无边框  点线式边框  破折线式边框  直线式边框  双线式边框  槽线式边框  脊线式边框  内嵌效果的边框  突起效果的边框 border:1px solid #F00
  • 【css】 div边框设置

    2014-08-19 16:19:01
    彩色边框 :这里使用的是蓝色"blue" 《div STYLE="border-style:solid;border-width:5pt; border-color:颜色">日志文字 二.双线边框:这里使用的是"red" 《div STYLE="border-style:Double;border-width:5pt; ...
  • CSS 为div单个角设置弧度 border-radius 百度知道 目标样式 具体实现 当前使用element-ui <el-divider content-position="left"> <div class="divider"><h4 class="divider_text">...
  • 边框线样式

    2019-09-26 15:31:55
    1.双重边框线 div{ outline-color: #2098F5; outline-style: double; outline-width: 1px; outline-offset: 7px; border:1px solid #2098F5; } 效果图: 2.渐变边框线  转自:https:...
  • div 中各种边框

    千次阅读 2017-08-28 23:19:42
    边框风格属性(border-style)   这个属性用来设定上下左右边框的风格,它的值如下:  none (没有边框,无论边框宽度设为多大)  dotted (点线式边框)  dashed (破折线式边框)  solid (直线式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 463
精华内容 185
关键字:

div边框线