`

DIV边框代码

 
阅读更多

立体线框代码稍加润色后的效果:

<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge;
border-bottom-style:Ridge;border-width: 7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">
文字</div></div>

      效果如框内所示,是带背景色(熏衣草色)的浮出。

代码配色后的效果如下:

<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d">
<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffc0cb">
文字</DIV></DIV>

背景为粉红色,效果如框内所示。

<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d">
<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9">
文字</DIV></DIV>

背景为桃色,效果如框内所示。

<div STYLE="border-style:outset;border-width:2pt; border-color: red">
<div style="width:100%;height:100%;background-color:#ffdead;">
日志文字
</div></div>

     使用上述语法将会为你呈现一个NAVAJO白底色红边框的浮出线效果背景,效果如框内显示。

以下代码来源于:午後の紅茶博客
简单线条边框,代码:<div style="border:1px solid #f990033;">文字内容</div>
简单线条边框,代码:<div style="border-style:outset; border-width:1px;">文字内容</div>
双线边框,代码:<div style="border:3px double #990033;">文字内容</div>
虚线边框,代码:

<div style="border:1px dashed #990033;">文字内容</div>

1,代码说明:

border 后面的数字是指边框的粗细,

dashed 指边框样式,

#000000 为边框颜色。

可以自己更换数字改变边框粗细,和颜色。多试几次!

可以参照颜色代码表 (颜色代码表转自"奔跑"博客)

 

2,代码使用方法

进入发表文章点击「显示源代码」

将选择的边框代码贴入

勾掉「显示源代码」

可以在代码中写字

                           也可以直接在边框中写字或贴图。

小白菜附几种边框颜色代码:

  #FF4500   #FF4040   #FF3E96   #FF34B3
  #FF3030   #FF1493   #FF00FF   #FF0000
  #A9A9A9   #A8A8A8   #A6A6A6   #A52A2A
  #A4D3EE   #A3A3A3   #A2CD5A   #A2B5CD
  #A1A1A1   #A0522D   #A020F0   #9FB6CD
  #9F79EE   #9E9E9E   #9C9C9C   #9BCD9B
  #9B30FF   #9AFF9A   #9ACD32   #9AC0CD
  #9A32CD   #999999   #9932CC   #98FB98
  #98F5FF   #97FFFF   #96CDCD   #969696
  #949494   #9400D3   #9370DB   #919191
  #0F0F0F   #0D0D0D   #0A0A0A   #080808
  #050505   #030303   #00FFFF   #00FF7F
  #00FF00   #00FA9A   #00F5FF   #00EEEE
  #00EE76   #00EE00   #00E5EE   #00CED1
  #00CDCD   #00CD66   #00CD00   #00C5CD
  #00BFFF   #00B2EE   #009ACD   #008B8B
  #008B45   #008B00   #00868B   #00688B
  #006400   #0000FF   #0000EE   #0000CD
  #0000AA   #00008B   #000080   #000000
分享到:
评论

相关推荐

    DIV边框动态效果

    鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态...

    又一个CSS DIV圆角边框代码.rar

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

    css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果

    两种实现方法一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮。 简单一点的纯css 复制代码代码如下: &lt;head&gt; ”content-type”content ...

    上下左右拖动改变DIV比例代码

    附件提供两种效果,一种是可以左右拉动div边框,一种是支持上下拉动DIV边框。懒人之家推荐下载

    div+css颜色代码大全

    我们在写div+css代码的时候,肯定会涉及颜色代码,比如我们背景颜色,边框颜色,字体颜色等,那么几百种上千种颜色代码,我们肯定是记不住的,没有关系,已为你整理好,你到用的时候可以直接把你需要颜色代码直接...

    鼠标抖动DIV边框特效效果

    鼠标放到div搭建的框下,DIV框出现不断抖动效果,鼠标移走后抖动消失。 适合用在一些需要特别注意的内容部分

    css+div控制表格 标签代码

    很方便的,你注意你的表格的边框了吗?它们达到一般网页的效果嘛,看看这个,希望你有所收获.

    div css圆角代码各种圆角表格_圆角边框css圆角

    div css圆角代码各种圆角表格_圆角边框css圆角

    div+css无图边框圆角实现思路及代码

    css 圆角边框的出现结束了传统使用圆角图片的时代,接下来与大家分享下div 边框圆角的实现,感兴趣的你可以参考下哈,希望对你有所帮助

    css+div实现各种常见边框.zip

    css+div实现各种常见边框(大括号、小括号、圆形括号等) 1、完整的代码示例,清晰简单; 2、效果示例图,轻松可见

    DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应

    黑色虚线边框[code/]实例: CSS代码: [code].divcss5{border:1px dashed #000; height:50px;width:350px} Html代码:复制代码代码如下:&lt;div class=”divcss5″&gt;我的四边为黑色虚线边框&lt;/div&gt; 这里设置边框缩写方式

    div 的边框显示不同效果示例代码

    div的边框是可以显示不同效果的,通过css的border属性便可轻松实现,下面有个不错的示例,喜欢的朋友可以参考下

    jQuery 左右2列可收缩的div布局

    代码精简,10行以下代码,即实现了隐藏、打开左侧栏

    div和css制作斜线示例分享

    DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上图右边是我们要实现的效果,代码...

    div实现阴影边框效果(适应各主流浏览器)

    复制代码代码如下: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;CSs阴影框,Div阴影&lt;/title&gt; &lt;style type=”text/css”&gt; *{ margin:0; padding:0; border:0; } body{ padding:4em; font...

    超多CSS Div圆角特效代码集.rar

    超多CSS Div圆角特效代码集,有DIV圆角,圆角菜单、圆角列表、圆角混合布局、圆角图片边框等,一共有10款圆角框效果,全部兼容ie8、火狐或Chrome浏览器,没有用到CSS3,传统CSS技术实现,是学习CSS的好资料。

    纯CSS3+DIV实现小三角形边框效果的示例代码

    具体代码如下所示: html代码是这样的 &lt;div class=arrow-up&gt; &lt;!--向上的三角--&gt; &lt;/div&gt; &lt;div class=arrow-down&gt; &lt;!--向下的三角--&gt; &lt;/div&gt; &lt;div class=arrow-left&gt; &lt;!--向左的三角--&gt; &lt;/div&gt; ...

    单元素利用css实现多重边框效果示例代码

    要多少边框直接嵌套多少个带边框的DIV元素不就行了么! 是的,这样确实简单粗暴,但是也会因此产生很多毫无实际意义的元素。 事实上,要实现同样效果,一个元素足矣! 接下来我将给大家分享单元素如何实现多重边框...

    黑白边框样式HTML模板

    黑白边框样式HTML模板是一款简洁黑白线条搭配的HTML网站模板下载。

Global site tag (gtag.js) - Google Analytics