`

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,可实现...

    js动态给div加线性边框

    "js动态给div加线性边框"这个话题就是关于如何使用JavaScript来实现一个动态的、线性的边框效果。线性边框通常指的是沿着div四周边缘的平滑过渡色彩,这种效果在许多现代网页设计中常见,比如进度条、加载动画等。接...

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题,特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中,DIV元素常被用作布局容器,而CSS(层叠样式表)则用于控制页面的样式和结构。在...

    鼠标悬停div边框动画 jquery 6个动画类型

    接下来,我们将深入探讨这6种鼠标悬停div边框动画的实现方法。 1. **渐变边框** 当鼠标悬停在div上时,边框颜色可以从一种颜色平滑过渡到另一种颜色。通过jQuery的`.animate()`函数,我们可以设置时间间隔和颜色...

    鼠标抖动DIV边框特效效果

    "鼠标抖动DIV边框特效效果"是一种创新的交互设计,它可以为网站增添趣味性和互动性。这种特效通常用于提示用户关注某个特定的内容区域,使其在浏览网页时更加聚焦。下面我们将详细探讨实现这一效果所需的技术知识。 ...

    css+div经典代码大全

    标题:“css+div经典代码大全” 描述:此资源提供了一系列CSS与DIV结合的经典代码实例,旨在帮助前端开发者理解和掌握如何运用CSS对DIV元素进行样式设计和布局控制,从而实现复杂且美观的网页界面。 标签:“Css...

    css+div控制表格 标签代码

    标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化HTML表格的样式,使其符合网页设计的一般需求。 表格在网页中常用于展示结构化数据,其基本HTML标签包括`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`...

    红色边框代码

    标题和描述中的“红色边框代码”指向的是一段CSS(层叠样式表)代码,这段代码主要用于网页设计中元素的样式定义,包括背景图片、边框颜色、文本颜色等属性。下面,我们将深入解析这段代码,理解其背后的含义与应用...

    DivCss代码

    压缩包中的“书中实例”可能包含了各种DivCSS布局的实战代码,比如简单的两栏布局、复杂网格系统、导航菜单、响应式图片和表格等。通过研究这些例子,你可以深入理解DivCSS的工作原理,掌握如何结合Div和CSS创建美观...

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

    "上下左右拖动改变`DIV`比例代码"就是解决此类需求的一个解决方案,它提供了两种不同的拖动方式:左右拖动和上下拖动。 1. 左右拖动`DIV`边框: 这种效果允许用户通过鼠标在`div`元素的左右边缘进行拖动,从而改变...

    CSS圆角边框制作代码

    其中一个常见的需求是创建具有圆角边框的元素,以提供更加现代和友好的视觉效果。本篇文章将深入探讨如何使用CSS来实现圆角边框。 首先,CSS3引入了`border-radius`属性,它允许我们为元素的每个角落设置独立的圆角...

    如何给div加一个边框border样式.docx

    CSS 边框(Border)样式是 HTML 中 DIV 元素的常用样式之一,本文将详细介绍如何给 DIV 加一个边框 Border 样式,包括虚线与实线边框、上边框、下边框、左边框、右边框、上下边框、左右边框和四边框等多种边框样式,...

    图片加边框css+div

    在提供的文件中,我们看到有`style.css`,这可能包含了用于定义边框样式的CSS代码。例如,它可能包含了类似上面的`.image-container`选择器的定义。`wphpicbg.gif`和`app-picbg.gif`可能是用于背景的gif图像,它们...

    div+css颜色代码大全

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

    HTML.zip_日志 边框 代码

    在高级模式下,用户可以直接操作HTML元素,比如添加`&lt;div&gt;`、`&lt;table&gt;`、`&lt;hr&gt;`或者其他标记来创建边框。 "5、写边框日志.jpg"可能展示了带有边框的日志示例,或者是在编辑过程中显示边框效果的截图,让用户知道...

    页面框架div+css代码

    **页面框架div+css代码详解** 在网页设计中,`div` 和 `css` 是构建网页布局的基础元素。`div`(division)是HTML中的一个块级元素,用于组织和分隔网页内容,而`css`(Cascading Style Sheets)则负责定义这些元素...

    div轮播图代码案例..

    在div轮播图中,CSS将用于定义轮播图容器的外观,包括宽度、高度、边框、内边距等,以及轮播图元素(如表格行或单元格)的过渡效果、定位和隐藏/显示状态。 3. **jQuery库**(jquery-1.11.3.min.js):jQuery简化了...

    导航经典推荐的23种div css代码

    本文将详细介绍标题为“导航经典推荐的23种div css代码”的资源包中所包含的知识点,帮助你理解和应用这些源码。 1. **基础布局**:在导航栏设计中,基础布局是关键。这可能包括水平布局、垂直布局或混合布局,以及...

    div css导航菜单用CSS样式表处理斜角导航条

    而“div css导航菜单用CSS样式表处理斜角导航条”这个主题,主要涉及如何使用HTML的`&lt;div&gt;`元素结合CSS(Cascading Style Sheets)来创建具有斜角边框效果的导航栏。下面我们将深入探讨这一主题,详细讲解相关的知识...

Global site tag (gtag.js) - Google Analytics