精华内容
下载资源
问答
  • 解决方法:box-sizing:border-box;向带边框div添加该css属性后,div不被挤下解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

    解决方法:box-sizing:border-box;

    向带边框的div添加该css属性后,div不被挤下

    解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

    展开全文
  • [img=https://img-bbs.csdn.net/upload/201401/18/1390028993_878674.jpg][/img]这两个绿色的div框 怎么让他去掉他们公用的那一小块边框
  • div制作四角边框

    千次阅读 2019-01-22 14:26:41
    其中二级菜单的四角单独用符号装饰,为了不受拉伸影响,决定不用四图片,而是css样式方法实现: .partcomwithborder{ background: linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,...

    先看一张效果图:
    在这里插入图片描述
    其中二级菜单的四个角单独用符号装饰,为了不受拉伸影响,决定不用四个图片,而是css样式方法实现:

    .partcomwithborder{
        background:
                linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
                linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
                linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
                linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
                linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
                linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
                linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat,
                linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat;
        background-size: 18px 18px;
        padding:4px;
        width:200px;
        height:200px;
    }
    .partcomwithbordersubcontent{
        border:1px solid #33cdfa;
        background:#01356799;
        width:100%;
        height:100%;
        padding:8px;
    }
    

    其中partcomwithborder为外侧四个边框的样式,partcomwithbordersubcontent为内侧带实边框和背景色的样式。

    partcomwithborder中linear-gradient参数说明如下:
    第一个参数:to bottom/left/right/top表示渐变色的方向;
    第二个参数至后面所有参数:这是一个列表,用逗号分开,每项中有两个参数,用空格分开,比如上例中:#33cdfa 0px表示沿着第一个参数定义的方向上在0px位置的颜色是#33cdfa,#33cdfa 2px表示沿着指定方向2px位置处颜色是#33cdfa。
    linear-gradient函数后面的top left表示分布在左上方。
    partcomwithborder中background-size: 18px 18px表示每个小框的长度和宽度,所以在linear-gradient函数后面要添加no-repeat表示只显示一遍,不然会一直重复:
    在这里插入图片描述
    每个小框的长度是由linear-gradient内部从第二个参数开始的列表定义的,比如:

    linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat
    

    表示从上往下渐变,最上方颜色#33cdfa,往下2px位置仍然是#33cdfa,3px位置为透明,到100%高度位置为透明,这样渐变只在2px到3px中间发生,由于1px长度很短,所以看上去小框的长度为2px,高度是18px(由background-size定义),这个竖着的小框显示在左上角,其他小框依次类推。

    这就是用div css方法实现四角框的方法,用这个方法可以使每个小框的大小和清晰度不受画面大小影响。

    展开全文
  • 又一个CSS DIV圆角边框代码,同样是把图片来修饰成的圆角特效,兼容IE8/火狐、Chrome等浏览器,由测试截图可看出,本实例实现上边左右两个角的圆角效果,下边则是直角,需要的朋友,自己动动手,修改一下CSS,可实现...
  • 两个div并排显示

    2018-04-12 01:23:56
    如果还要居中,使用一个大div包住两个div,将大div的float:left或者none,自己调试即可。另外注意:大div的长度一定要大于两个div的长度之和,等于也不行。可能由于边框的存在。长度自己调试即可。...

    一个div一般占据一行空间,所以如果要并排显示可以使用float:left;

    如果还要居中,使用一个大div包住两个小div,将大div的float:left或者none,自己调试即可。

    另外注意:大div的长度一定要大于两个小div的长度之和,等于也不行。可能由于边框的存在。长度自己调试即可。

    展开全文
  • div设置边框的方法

    千次阅读 2016-11-14 15:11:17
    borderColor和borderWidth这两个属性应该同时设置才生效。
    borderColor和borderWidth这两个属性应该同时设置才生效。
    展开全文
  • 关于CSS3设置Div左右两边或者上下边框的样式 目前可以通过如下方法,实现div只显示某些边框。 1、border: 1px dashed lightgray; border-top: none; border-left: none; border-right: none; 2、先设全...
  • 两个并排的div顶部不对齐

    千次阅读 2016-09-13 19:50:29
    问题:在一个大的div里面有两个并列的div,因为div中的内容不同,导致两个div的上部不对齐。原因:每个浏览器会有自己的一种定义布局的方式。有些默认上对齐,有些默认下对齐。解决方案:两个div都设置一下样式:...
  • 多重边框一个边框很简单,就不说了。border嘛对不对。 好,那么,二重边框 呢?比如说这样: 啊,你肯定要说,这还不简单,再一个div不就行了…<div> <div></div> </div>nonono,记住,今天我们所有的边框,都...
  • 在非table页面里面,用margin-left:-1px,往里偏移边框像素
  • DIV+CSS实现圆角边框

    千次阅读 2009-05-29 02:25:00
    其实,这些做法并非让DIV的四角圆滑,而是在DIV上下两个方向添加多个高度很小的层,每个层距左距右的距离不同,最终看似圆角效果。看出玄机了吧?其实是视觉效果。以下是抄来的一段代码。用css做带圆角的边框body{...
  • CSS3如何实现DIV圆角边框

    千次阅读 2020-02-23 16:50:24
    #CSS3如何实现DIV圆角...例如:想让div盒子边框角都为半径为10px的圆角时具体代码如下: 效果图: 下面对border-radius具体细节进行介绍: 语法:border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺...
  • 关于div嵌套,不显示边框问题

    千次阅读 2013-07-14 20:16:24
    可是在调试div边框的时候,总是弄不好,最后是自己的border属性弄错了。在jsp中的border属性可以跟多值,注意:值之间不是赢 ‘,’分隔的,用空格键分隔的。 管理员管理 border :1px solid #CCC;...
  • div边框重叠 解决办法

    万次阅读 2017-06-13 14:34:32
    解决办法:设置边框的相反数,比如边框为1PX, 则给每块的div添加margin-right:-1px; margin-bottom:-1px.
  • div+css实现圆角边框

    2008-05-14 01:34:00
    div+css实现圆角边框: 在网络上查看了一下div+css实现圆角边框,很多都是实现圆角的矩形的方法,我在这里介绍的是实现圆角矩形边框的方法。 用代码说明问题: #a{ border-left:1px #333 solid; border-...
  • 近日在画一个界面的时候,遇到一个需求:... 在两个div中加多一个div,并设置左(右)边框为可见,并且利用利用padding-bottom|margin-bottom正负值相抵消的原理。例如设置 padding-bottom:1600px; margin-bottom:-
  • HTML-用css样式定义div边框样式

    千次阅读 2018-10-13 20:31:13
    如下所示我用css定义了这个边框的属性 &amp;lt;style&amp;gt; .c{ width:100px; height:100px; border-width: 1px; border-style: solid; border-color: black; } &amp;lt;/st...
  • 答案是20 你们可能会想为什么不是40呢?这就要好好理解一下盒子模型了(如下图所示) 盒子的大小由内容,内边距和边框决定,外边距只是用来...例如:上下两个div设置margin分别为20px,30px,两个div的间距是30px ...
  • 两个div出现间隙

    千次阅读 2017-05-24 18:18:39
    123 456 两个div这样同时设置了padding,宽度百分百,没有父层,在两个中间会出现一条间隙。有一个不设置一个设置就不会出现这个问题,目前解决办法是margin-top:-1px;浮动什么的都清除了。
  • iframe div边框属性

    千次阅读 2011-02-11 14:38:00
    未设定优先属性(z-index)的div,按照声明的顺序层叠,后声明的盖住先声明的,如果有两个Div属于父子关系,则子div覆盖父div; 5、透明属性:opacity:0.3;(firefox专用);filter:alpha(opacity=30)(IE专用)...
  • 话不多说,先上图分析结构 按照正常的思路,在观看这图形的...这,我们其实只要使用三个div就可以画出这八卦图形 首先创建三个div标签:<div id="box"> <div class="one"></div> <div class="two"></div
  • div四角边框——linear-gradient

    千次阅读 2018-07-10 10:08:04
    此时的linear-gradient的主要作用不再是线性渐变,所以多余的属性可以去掉,定义两个相同的颜色即可,然后接线条位置。 这里总共有8条线,第一条线对应background-size为1px 24px;第二条线对应24px 1px。后续几...
  • 其他三个边框可通过设置border完成,包含文字的一边可以分布实现:左边线 + 文字 + 右边线 html: <div class="pop"> <div class="pop_title"> <span class="line_left"></span> <...
  • 两个div水平顶部对齐

    万次阅读 2018-05-02 16:43:53
    left-div和right-div都设置display:inline-block; 和vertical-align: top; 使得右边的div跟左边的div的顶部对齐 最终代码如下 <div id='left-div' style="width:20%; display:inline-block;vertical-align: ...
  • 在独立的img元素套用div作为父级元素时,常规思维认为div边框=img边框,但是却意外会发现div边框多了4px左右的像素,先看图: 分析原因: img属于行内元素,在结束的时候,会在末尾加上一空白符,而空白符默认...
  • css:设置div边框透明+渐变

    千次阅读 2019-01-15 19:44:00
    写作背景:  觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框。效果图如下: ... 1、分成两个div叠加的形式 <!DOCTYPE html> &l...
  • 两个div的重叠效果,上层透明

    千次阅读 2013-09-12 22:21:30
    dddddddddddddddddddddddddd 说明:position:relative; 相对定位 position:absolute; 绝对定位 z-index:1;... div的透明度为百分之五十 适用于IE ... div的透明度 适用于FF 1.5也支持 -moz-opacit
  • 两个div之间有间隔的解决办法

    千次阅读 2018-01-29 11:38:57
    今天在练习九宫格的时候发现一个宽度为450px的父级div不足以放下三个宽度均为150px的子div,一开始十分郁闷,然后尝试给所有子div一个不同的background-color,发现两个div之间存在小间隔,忽然意识到是浏览器将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,103
精华内容 26,441
关键字:

div加两个边框