精华内容
下载资源
问答
  • 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"></div> 代码解释:border-...

    <div  style=" border-bottom:solid 1px green; border-left:solid 1px gray; border-right:solid 1px blue; border-top:solid 1px red"></div>

    代码解释:border-bottom 下边框    border-left  左边框  

    border-right   右边框   border-top上边框

    以border-bottom:solid 1px green为例解释:

    border 简写属性在一个声明设置所有的边框属性。

    可以按顺序设置如下属性:

    • border-width  规定边框的宽度。    

    • border-style    规定边框的样式。

    • border-color   规定边框的颜色

    如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的

    展开全文
  • CSS 为div单个角设置弧度 border-radius 百度知道 目标样式 具体实现 当前使用element-ui <el-divider content-position="left"> <div class="divider"><h4 class="divider_text">...

    参考文章

    1. CSS 为div单个角设置弧度 border-radius

    2. 百度知道

    3. div布局根据内容自适应宽度

    div宽度自适应

    .divider {
        display:inline;
        zoom:1;
    }

    目标样式

    具体实现

    当前使用element-ui

    <el-divider content-position="left">
        <div class="divider"><h4 class="divider_text">一年</h4></div>
    </el-divider>
        .divider {
    		width: 80px;
    		height: 23px;
    		border: 1px solid #CCCCCC;
    		border-radius: 5px;
    		text-align: center;
    		background-color: #EEEEFF;
    	}
    
    	.divider .divider_text {
    		padding-top: 3px;
    	}

    进阶样式

    语法

     <fieldset class="fieldset">
        <legend>
            <div class="divider">
                <h5 class="divider_text">一年</h5>
            </div>
        </legend>
    
        <el-row>
        ......
        </el-row>
     </fieldset>
    .divider {
            width: 80px;
            height: 23px;
            border: 1px solid #CCCCCC;
            border-radius: 5px;
            text-align: center;
            background-color: #EEEEFF;
        }
    
        .divider .divider_text {
            padding-top: 3px;
        }
    
        .fieldset{
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 1px solid silver;
            border-radius: 5px;
        }

     

    展开全文
  • 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px。 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css: div{ ...

    原因:

    因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px。

    但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css:

     

    div{
         border:1px solid #000;
    }    
    
    @media (-webkit-min-device-pixel-ratio: 2) {
        div{
              border:0.5px solid #000;
        }
    }

    但在ios7以下,android等其他系统里,0.5px会被显示为0px,所以需要写hack来兼容旧版本的系统。

    有两种方案:

    1、JS判断浏览器版本,是否是IOS8+,是的话则加上hairlines的类名,加在head里即可。

    CSS代码:

    div{
          border:1px solid #000
    }
    
    .hairlines div{
          border-width:0.5px
    }

    JS代码:

    if (window.devicePixelRatio && devicePixelRatio >= 2) {
          document.querySelector('body').classList.add('hairlines')
    }
    

      

    2、JS判断是否支持0.5px的边框,是的话,则加上hairlines的类名。(代码放在body内)

    if (window.devicePixelRatio && devicePixelRatio >= 2) {
          var testElem = document.createElement('div');
          testElem.style.border = '.5px solid #000';
          document.body.appendChild(testElem);
    
          //当div存在
          if (testElem.offsetHeight == 1){
            document.querySelector('html').classList.add('hairlines');
          }
    
          //添加完hairlines类名后,则删除div
          document.body.removeChild(testElem);
    }
    

    将代码放在body内会有一些重绘,第一种方法会更好一些。

     

    当然这些方法,只能兼容IOS7包括IOS7以上的机器,但如果想兼容其他机器怎么办呢?这块我就要细细道来...

    在retina屏下面,如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西。

    关于CSS像素和物理像素的定义,这个文章里有详细的介绍  走向视网膜(Retina)的Web时代

    在 viewport 中, 因为设置了initial-scale(表示初始时的缩放比例),minimum-scale(最小缩放比例)和maximum-scale(最大缩放比例)都为1, 因此整个页面都不能缩放, retina 屏幕下1个 css 像素对应 2个(多个)物理像素, 因此我们永远写不出1px(物理)宽度的东西. 然而我们其实可以这样写:

    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    

    淘宝M端 就是这样的方案,这样一个css的像素就能完美对应1个物理像素,我们就可以写出1px的东西了。

     

    其他方案:

    1. transform: scale(0.5)

    方法1:

     CSS代码:

    div{
            height:1px;
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin:0 0;
            overflow: hidden;
            background: #000;
    }
      
    

      

    HTML代码:

    <body>
       1px边框线
       <div></div>
    </body>
    

     

    缺点

      圆角无法实现,实现4条边框比较麻烦,并且只能单独实现,如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。

      比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父元素的after、before再画2条线。

    div{
       position: relative;
    }
    
    div:after{
       content:"";
       position: absolute;
       bottom:0px;
       left:0px;
       right:0px;
       border-bottom:1px solid #000;
       -webkit-transform:scaleY(.5);
       -webkit-transform-origin:0 0;
    }
    

      

    2. box-shadow

    实现方法:

    利用CSS对阴影处理的方式实现0.5px的效果。

    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
    

    优点:

    基本所有场景都能满足,包含圆角的button,单条,多条线。

    缺点:

    • 颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。  
    • 大量使用box-shadow可能会导致性能瓶颈。
    • 四条边框实现效果不理想。

    3. 使用background-image

    使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

     

    渐变 linear-gradient   (50%有颜色,50%透明)

    单条线:

     

    div {
         height: 1px;
         background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
         background-position: top left;
         background-repeat: no-repeat
         background-size: 100% 1px;
    }
    

     

    多条线:  

    div {
            background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
            background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
            background-repeat: no-repeat;
            background-position: top left, bottom left, left top, right top;
    }
    

    优点:

    • 可以设置单条,多条边框
    • 可以设置颜色

    缺点:

    • 大量使用渐变可能导致性能瓶颈
    • 代码量大
    • 多背景图片有兼容性问题

      

    用图片(base64):

    div {
            border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/GMzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
            border-width: 0px 0px 1px;
    }
    

    优点:

    • 可以设置单条,多条边框
    • 没有性能瓶颈的问题

    缺点:

    • 修改颜色麻烦, 需要替换图片
    • 需要用到两张图片
    • 多背景图片有兼容性问题

      

     

    转载于:https://www.cnblogs.com/wangshiyang/p/4824923.html

    展开全文
  • 其内嵌一个iframe框架,因此它的高度是动态的,而分隔线的右侧也是一个嵌套了iframe的div层,随着显示的不同界面,其高度也是动态变化的,那么分隔线的显示应该使用高度最高的那一个层的边框线,下面就是确定哪一个div层的...
     
    

    文件使用了模板页,可以将中间部分剥离出来.

    要实现的效果如下:

    上图中的树形目录与右侧的操作界面中间的分隔线的如何显示:

    分隔线的左侧是一个div层,其内嵌一个iframe框架,因此它的高度是动态的,而分隔线的右侧也是一个嵌套了iframe的div层,随着显示的不同界面,其高度也是动态变化的,那么分隔线的显示应该使用高度最高的那一个层的边框线,下面就是确定哪一个div层的高度最高.

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <link href="../Styles/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="../Scripts/jquery-latest.pack.js"></script>
        <script type="text/javascript" src="../Scripts/dialog.js"></script>
        <script type="text/javascript" src="../Scripts/Department.js"></script>
        <script type="text/javascript">
            function SetCwinHeight(obj) {
                var cwin = obj;
                if (document.getElementById) {
                    if (cwin && !window.opera) {
                        if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
                            cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS
                        else if (cwin.Document && cwin.Document.body.scrollHeight)
                            cwin.height = cwin.Document.body.scrollHeight + 10; //IE
                    }
                    else {
                        if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
                            cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
                    }
                }
                if (cwin.name == "deptTree")
                    $("#leftheight").val(cwin.height);
                if (cwin.name == "deptUser")
                    $("#rightheight").val(cwin.height);

                var lheight = parseInt($("#leftheight").val());
                var rheight = parseInt($("#rightheight").val());
                if (!isNaN(lheight) && !isNaN(rheight)) {
                    if (lheight > rheight) {
                        $("#depart_left").css("border-right", "1px solid #999");
                        $("#depart_right").css("border-left", "0px solid #999");
                    }
                    else {
                        $("#depart_left").css("border-right", "0px solid #999");
                        $("#depart_right").css("border-left", "1px solid #999");
                    }
                }
            }

        </script>
        <script type="text/javascript">
            var dept = {};
            dept.HidDeptUserID = "<%=HidDeptUserID.ClientID %>";
        </script>

    <!--这里的两个隐藏字段,是为了辅助记录层的高度,因为服务器控件在初始化的时候,会有数次的服务器与客户端之间的往返,这种动态数据必须记录下来,否则会在往返中丢失-->
        <asp:HiddenField ID="leftheight" runat="server" />
        <asp:HiddenField ID="rightheight" runat="server" />

        <div style="width:100%">
        <table class="table" width="99%" cellspacing="0">
            <tr bgcolor="#efefef"><td height="25" align="left">
            <div><strong> 组织架构</strong></div>
                   
            </td></tr>
            <tr><td>
            <div style="text-align:center;">
                <div style=" text-align:left;">
                <asp:Button ID="btnAddUser" CssClass="button" runat="server" Text="添加员工" OnClientClick="return addEntUser();" />
                <asp:Button ID="btnAddOrganizationPermission" CssClass="button" runat="server" Text="添加职务"  OnClientClick="return addOrganizationPermission();" />
                <asp:Button ID="btnAddDepart" CssClass="button" runat="server" Text="添加部门" OnClientClick="return addDetpart();" />
                <asp:Button ID="btnRelated" CssClass="button" runat="server" Text="添加工作关系"  OnClientClick="return Related();"/>
                <asp:Button ID="btnDel" CssClass="button" runat="server" Text="删除"
                    OnClientClick="return DeleteDepartUser();" οnclick="btnDel_Click" />
                </div>
                <br />                                                                               
                   <div>
                    <div id="depart_left" style="height:100%; overflow:visible; width:218px;">
                        <iframe name="deptTree" id="deptTree" src="DeptTree.aspx" marginheight="0" marginwidth="0"
                            frameborder="0" allowtransparency="true" οnlοad='SetCwinHeight(this);' scrolling="no"
                            width="218px"></iframe>
                    </div>
                    <div id="depart_right"  style="height:100%; overflow:visible; width:496px;">
                        <iframe name="deptUser" id="deptUser" src="AddDepart.aspx?type=modify"
                            marginheight="0" marginwidth="0"
                            frameborder="0" allowtransparency="true" οnlοad='SetCwinHeight(this);'
                            scrolling="no" style="width: 496px"></iframe>
                    </div>
                    </div>
                    <script type="text/javascript">
                       
                           
                       
                   </script>
                    <input id="HidDeptUserID" type="hidden" runat="server" value="0" class="hidcalss" />
            </div>

            </td></tr>
        </table>
        </div>


      

    </asp:Content>

    展开全文
  • div的默认设置 要想显示border,我们必须要将border的style设置为不是none,及设置border的类型不是不可显示; 这里 border-style 有以下几种类型; none 定义无边框。 hidden 与 “none” 相同。不过应用于表时...
  • 三角形div的原理

    2016-09-01 10:36:00
    首先我们写一个正常的方形div样式,但是我们把它的宽度和高度都设置为零,并且边框线设置的粗一点: { width:0px; height:0px; Border:20px solid red; } 由于我们宽度和高度都设置成了0,所以他显示的就是一...
  • div样式

    2013-06-17 14:33:23
    ★双线框代码★ 文字 ...效果如框内,是带背景色(熏衣草色)的简单双线框。...显示的效果是背景色为桃色的简单双线框。效果如框内所示,边框的颜色是橙红色#...效果如框内所示,边框的颜色是橙红色#ff4500,框内背
  • div+css

    2016-09-09 10:44:59
    标签默认一行只能显示一个,而使用float属性可以实现一行显示多个div的功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 ...
  • body中放右边线显示不全解决:在外面套一个panel,边框隐藏:border:hidden<div class="easyui-panel" style="margin-top: 5px; height: 100%;border:hidden"> ;"> </div>
  • CSS+DIV点滴

    2010-05-19 10:25:39
     情况下img会默认显示边框,所以必须给img添加border:0;的样式。因为一般的img都无需边框,所以可以将设置img  无边框的代码写到公共的样式文件中,以达到代码公用的目的 2.同一div中存在文本和图片,已写了样式...
  • css-虚线边框滚动效果

    千次阅读 2019-05-07 16:26:15
    常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。 基本HTML <div class="box"> <p>测试测试<...
  • Js Div属性大全

    2010-10-30 11:52:15
    align 设置或获取对象相对于显示或表格的排列方式。 atomicselection 指定元素及其内容是否可以一不可见单位统一选择。 begin 设置或获取时间线在该元素上播放前的延迟时间。 blockDirection 获取表明块元素...
  • 常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。 基本HTML <div class=box> 测试测试 </div> Easy-way 通过...
  • 最近发现在制作手机网页div边框1px都好粗啊,看到其他的app边线很细很精致,心想是不是他们设置边框为0.5px的啊! 于是就把边线也设置成了0.5px, 在ios8下面非常完美。 问题来了, 在ios7和安卓都不能显示边线了。...
  • 如果是单色的线,可用border来实现,如果有渐变或者1PX的图案,那只好用盒容器加背景图了。 对于IE7及以上的浏览器和现代浏览器来说,实现起来很容易。 div .line{ display:block; margin:30px; width:1000px; ...
  • 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner广告图片动画插件示例 22.jquery实现LightBox图片点击放大效果的图片盒子插件 23.jQuery实现slider图片滚动,单个滚动...
  • 3.1.6 文字的下划线、顶划线和删除线 3.1.7 英文字母大小写 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.4.1 段落的水平对齐方式 3.4.2 段落的...
  • 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner广告图片动画插件示例 22.jquery实现LightBox图片点击放大效果的图片盒子插件 23.jQuery实现slider图片滚动,单个滚动...
  • 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...
  • 一、CSS盒模型盒模型概述盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。如下图所示:内边距出现在内容...
  • 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝好...
  • 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成...
  • 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成...
  • 开始能显示](https://img-ask.csdn.net/upload/201904/12/1555048415_771910.jpg) ![点击换一张](https://img-ask.csdn.net/upload/201904/12/1555048446_682827.jpg) 代码 验证码 <td colspan="0">...
  • "showcanvasborder": "0",//是否显示实体的边框 "bgAlpha": "0",//设置整个地图的背景透明度 "includeNameInLabels": "1",//是否在labels中显示实体名称 "useSNameInLabels": "1",//是否在labels活实体名称...
  • border用处多

    2016-04-14 10:51:00
    给定一个div,通过设定div四个边框不同的颜色且设置比较粗的边框线条,可以看到div除了中间的content部分,四个边框均成梯形状,既然已经有了梯形的雏形,我们可以隐藏一部分内容,只显示我们需要的部分,例如如果...
  • showDelay: 0,//显示延时,添加显示延时可以避免频繁切换 hideDelay: 50,//隐藏延时 transitionDuration: 0,//动画变换时长 backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色(此时为默认色) borderRadius:...
  • showDelay: 0,//显示延时,添加显示延时可以避免频繁切换 hideDelay: 50,//隐藏延时 transitionDuration: 0,//动画变换时长 backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色(此时为默认色) borderRadius:...

空空如也

空空如也

1 2 3 4 5
收藏数 87
精华内容 34
关键字:

div显示边框线