精华内容
下载资源
问答
  • div 边框

    2019-10-02 00:26:16
    1、四个边框border-left设置左边框,一般单独设置左边框样式使用border-right设置右边框,一般单独设置右边框样式使用border-top设置上边框,一般单独设置上边框...2、四边相同边框border简写#divcss5{border:1px so...

    1、四个边框
    border-left 设置左边框,一般单独设置左边框样式使用
    border-right 设置右边框,一般单独设置右边框样式使用
    border-top 设置上边框,一般单独设置上边框样式使用
    border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

    2、四边相同边框border简写
    #divcss5{border:1px solid #00F}
    设置了divcss5对象盒子1px像素蓝色实线边框

    3、边框三个样式
    通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

    1)、边框颜色:border-color:#000

    2)、边框厚度(宽度):border-width:1px
    使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。

    3)、border边框样式:border-style:solid

    边框样式值如下:
    none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
    dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
    solid :  实线边框(常用)
    double :  双线边框。两条单线与其间隔的和等于指定的border-width值
    groove :  根据border-color的值画3D凹槽
    ridge :  根据border-color的值画菱形边框
    inset :  根据border-color的值画3D凹边
    outset :  根据border-color的值画3D凸边

    4)、边框样式截图:

    css border边框样式效果图
    边框border-style样式效果图

    四、CSS单独设置左边框、右边框、上边框、下边框   -   TOP

    以缩写方式写上、下、左、右边框单独CSS样式设置方法

    1、1px黑色虚线上边框
    border-top:1px dashed #000

    2、1px黑色实线下边框
    border-bottom:1px solid #000

    3、1px黑色虚线左边框
    border-left:1px dashed #000

    4、1px黑色实线右边框
    border-right:1px solid #000

    五、常用推荐边框样式   -   TOP

    我们通常使用主流浏览器兼容边框样式有:

    1、实线边框:solid
    Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。

    2、虚线边框:dashed
    Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。

    六、css border边框用处   -   TOP

    设置对象边框样式,设置单独上边框、下边框、左边框、右边框样式,实现美化美观。边框起到分割、规划布局作用。

    七、border边框样式优化简写图文教程   -   TOP

    border css样式语法结构分析图
    CSS border边框属性语法结构分析图(简写优化的边框border)

    八、css边框应用案例代码   -   TOP

    描述:为了观察案例效果我们设置一个css宽度为200px,css高度1px,红色实线边框的DIV盒子

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

    HTML代码对应片段:
    <div id="divcss5">我的高度为100px,宽度为200px</div>

    九、css border边框案例截图   -   TOP

    border边框应用案例截图
    边框border样式应用示范案例截图

    十、css边框border总结   -   TOP

    我们使用DIV CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码,CSS 边框优化简写,常见对对象设置CSS样式使用属性代码:border:1px solid #000;。

    十一、三边有边而一边没有设置技巧   -   TOP

    如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。

    CSS 代码: border:1px solid #000; border-top:none;
    注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。

    相关阅读
    CSS 颜色
    CSS 文本
    CSS padding
    CSS margin

    转载于:https://www.cnblogs.com/hgj123/p/3680566.html

    展开全文
  • div边框

    千次阅读 2013-05-22 09:52:38
    div边框样式设置 border:1px solid #FF0000; 表示4条边都是1像素直线边框,红色。 1px表示边框宽度,solid表示直线(虚线可以用dashed),#FF0000是颜色值(这个不用我多说了吧) 如果要定义4条边都不一样,...

    div边框样式设置

    border:1px solid #FF0000;
    表示4条边都是1像素直线边框,红色。
    1px表示边框宽度,solid表示直线(虚线可以用dashed),#FF0000是颜色值(这个不用我多说了吧)

    如果要定义4条边都不一样,那么用:
    border-top:
    border-right:
    border-bottom:
    border-left:

    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>

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

    2018-05-21 13:52:39
    鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态...
  • 简单明了div边框css动画简单明了div边框css动画简单明了div边框css动画
  • 在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮,需要了解的朋友...
  • 鼠标悬停div边框动画 jquery鼠标悬停div边框动画 6个动画类型
  • div边框加文字效果

    2012-10-09 15:02:04
    div边框加文字效果
  • css div边框倾斜I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever,...

    css div边框倾斜

    I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of CSS to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.

    我发现有关Reddit的r / webdev最近讨论很有趣:如上所示,如何使容器看起来有倾斜的底部边框? 投票最多的答案虽然很聪明,但仅适用于固定宽度的容器,并且使用了大量CSS来达到效果。 通过牺牲少量的向后兼容性,我认为有更好的选择。

    This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more:

    这个迷你课程可能被认为是重新构想网站布局的一部分:在最长的时间里,我们一直依赖于三列网格和90°角。 但是只要稍加想象,我们就可以做更多的事情:

    My solution doesn’t even require an extra element. Instead, it uses multiple backgrounds with a linear gradient. The full HTML is as follows:

    我的解决方案甚至不需要额外的元素。 相反,它使用具有线性渐变的 多个背景 。 完整的HTML如下:

    <div id="login">
    	<h1>Sign Up</h1>
    	<img src="adriana.jpg" alt>
     	<label for="name">Name</label>
     	<input id="name" type="text" name="name">
    	<label for="email">Email</label>
    	<input id="email" type="email" name="email">
    	<label for="password">Password</label>
    	<input id="password" type="password" name="password">
    	<input type="submit" value="Done">
    </div>

    The key CSS:

    关键CSS:

    #login {
    	font-family: Avenir, Calibri, sans-serif;
    	width: 33%;
    	margin: 0 auto;
    	background-image: 
    		linear-gradient(175deg, transparent 36%, white 36.05%), 
                url(nahatlatch.jpg);
    	text-align: center;
    	background-size: 100%, cover;
    	background-repeat: no-repeat;
    }

    By overlaying the bitmap background image with a linear gradient (remember, in CSS the last background image in a declaration is laid down first), we get the sweep of the gradient over the image; by starting the gradient transparent, we get to see the image underneath, and by placing the transition of the transparent part of the gradient very close to the white stop, the effect is a sharp, angled cutoff.

    通过用线性渐变覆盖位图背景图像(请记住,在CSS中首先放置了声明中的最后一个背景图像),我们获得了图像上的渐变范围; 通过开始transparent的渐变,我们可以看到下面的图像,并将渐变的transparent部分的过渡放置在非常接近white光圈的位置,效果是清晰的,有角度的截止。

    The rest of the CSS simply styles the div (which could be almost any container element) and its content; I’ve left it here for anyone who may be interested.

    CSS的其余部分div (几乎可以是任何容器元素)及其内容设置样式。 我把它留给了任何有兴趣的人。

    #login h1 { font-weight: 100; padding-top: 6rem; }
    #login img { 
    	width: 33%; 
     	height: auto; 
     	border-radius: 50%; 
     	border: 5px solid white;
    }
    #login label { color: #666; margin-top: 1rem; }
    #login input, #login label { 
    	display: block;
     	width: 90%;
    	margin: 0 auto;
    	padding: .5rem;
    }
    #login input { 
    	text-align: center;
    	border: none;
    	border-bottom: 1px solid #aaa;
    	font-size: 1rem;
    }
    #login input[type="submit"] { 
    	width: 100%; 
    	margin-top: 1rem;
    	background: hsl(0, 90%, 60%);
    	color: #fff; padding: 1rem;
    	text-transform: uppercase;
    }

    There’s also the Codepen repo, which contains code for some responsive breakpoints. The single downside to this version of the effect is a bit of browser compatibility: Internet Explorer didn’t support gradients until version 10. You could, however, provide another version of the background-image declaration earlier for just that browser.

    还有Codepen repo ,其中包含一些响应性断点的代码。 此版本的效果的唯一缺点是与浏览器的兼容性:Internet Explorer直到版本10才支持渐变。但是,您可以为该浏览器更早地提供background-image声明的另一个版本。

    翻译自: https://thenewcode.com/236/Creating-a-div-with-a-Slanted-Bottom-Border

    css div边框倾斜

    展开全文
  • html div边框阴影

    2019-10-02 12:45:46
    1、div边框阴影 1 <style> 2 div{ 3 -webkit-border-radius: 8px; 4 -moz-border-radius: 8px; 5 border-radius: 8px; 6 -webkit-box-shadow: #ccc 0px 0px 10px; 7 -moz-box-shadow: #ccc 0...

    1、div边框阴影

     1 <style>
     2 div{ 
     3 -webkit-border-radius: 8px;
     4 -moz-border-radius: 8px;
     5 border-radius: 8px;
     6 -webkit-box-shadow: #ccc 0px 0px 10px;
     7 -moz-box-shadow: #ccc 0px 0px 10px;
     8 box-shadow: #ccc 0px 0px 10px;
     9 }
    10 </style>

     

    2、div里的img实现放大时候仍在div框里。

    在img外再套一层div。position为relative。img标签position为absolute。

    <div style="width: 50%; float:right; height: 80%;">
    <p style="font-weight:900; font-size: 18px;color: #333;">细节截图:</p>
    
    <div style="width:500px;height:30px;position:relative">
    <img  class="big" style="width:500px;height:20px;position:absolute;top:0;left:0;" src=
    "./pics/0.1.jpg" />
    </div>
    
    <br />
    <div style="width:500px;height:30px;position:relative">
    <img class="big" style="width:500px;height:20px;position:absolute;bottom:0;left:0;" src=
    "./pics/0.2.jpg" />
    </div>
    
    </div>
    

    上面的图片top为0,放大时向下。下面的图片bottom为0.贴着div的底部向上放大。

     

    转载于:https://www.cnblogs.com/hulumiaomiao/p/8565263.html

    展开全文
  • 可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
  • 设置div边框样式

    千次阅读 2017-02-12 23:18:35
    设置div边框样式: /*设置边框的方式:*/ 1. border:1px solid red; 2. border-width:1px;边框的粗细 border-style: solid;边框的风格 border-color: red;边框的颜色 3. border-left:1px solid red;border...
  • 几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar...
  • div 边框旋转,纯 css

    千次阅读 2020-11-29 18:03:20
    div 边框旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
  • 这样单独的字母和数字组成的句子会超出div边框而不会换行 而像啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊这样的汉字 和jadgjglajlakajhgahgalkgha这样有组合的字母则不会 <div style="width: 200px; height: 200px...
  • div边框属性

    2020-06-10 16:54:01
    1.边框圆角 div:{ border: 1px solid block; border-radius:25px; } 2.边框阴影 div:{ box-shadow:-2px 0 3px -1px green, //左边阴影 0 -2px 3px -1px blue, //顶部阴影 0 2px 3px -1px red, //底部阴影 ...
  • 几种常见的DIV边框样式
  • div 边框阴影

    2011-08-18 06:58:17
    div边框加阴影效果,求高手帮忙~ 浏览次数:60次悬赏分:0 | 解决时间:2011-8-10 15:39 | 提问者:zmjailwy 在css样式里建了.mydiv{ width:500px;height:auto;border:#909090 1px solid;background:#fff;color:#...
  • vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果 直接上代码了 复制过去即可使用 <template> <div> <div id="app"> <div class="box-bottom" ref="drag_box" :style="'height:'...
  • html超出部分隐藏 DIV边框的内容隐藏

    千次阅读 2019-06-11 10:41:20
    溢出超出DIV边框的内容自动隐藏方法 html超出部分隐藏 == div加入css属性 overflow:hidden ==
  • div边框的定义方法

    2014-03-01 16:05:00
    div边框的正确定义方式如下: border:1px solid #3399FF; 要指定边框的宽度、样式和颜色值,边框才能显示出来。只指定边框的宽度,边框是不会显示出来的。如果将这三个值分开定义,边框不一定能显示出来,显示出来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,960
精华内容 2,384
关键字:

div边框