`
izuoyan
  • 浏览: 9221269 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

div 边框

阅读更多
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: 2pxdashed #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: 2pxdashed #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: 7pxgroove; 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: 7pxridge; BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; BORDER-LEFT: 7px ridge; WIDTH: 100%; BORDER-BOTTOM: 7px ridge; HEIGHT: 100%" align=left>日志文字</DIV>

分享到:
评论

相关推荐

    DIV边框动态效果

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

    div边框加文字效果

    div边框加文字效果

    可拖动div边框改变大小的方法

    可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。

    CSS圆角有立体感的DIV边框

    CSS圆角有立体感的DIV边框! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    几种常见的DIV边框样式

    几种常见的DIV边框样式

    几种常见的DIV边框样式.rar

    几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar...

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

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

    简单明了div边框css动画

    简单明了div边框css动画简单明了div边框css动画简单明了div边框css动画

    鼠标抖动DIV边框特效效果

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

    js动态给div加线性边框

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

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

    在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮,需要了解的朋友...

    css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式

    3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果:横向文字覆盖、纵向文字覆盖 6.聚集效果:普通聚集、猫耳朵、熊耳朵等等更多样式 7.波纹效果:...

    css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果

    3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果:横向文字覆盖、纵向文字覆盖 6.聚集效果:普通聚集、猫耳朵、熊耳朵、流光聚集 自定义内容丰富,...

    div+css做的漂亮的框框

    效果预览 http://www.lzlu.com/Google/js/box/box.html&lt;br&gt;&lt;br&gt;以前刚刚学div css的时候老不知道这种漂亮的框该如何布局 今天心血来潮,扒了EXT瞧了瞧,原来这么简单 放在这里,嘿嘿,不要笑话 只是希望没...

    DIV+CSS 圆角边框

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

    div+css 鼠标经过 边框线条特效

    这将使得用户在鼠标指针移动到`div`元素上方时,边框立即变得更宽且颜色变为红色,产生视觉上的动态变化。 为了创建更复杂的线条特效,可以使用`transition`属性来平滑过渡这些变化。`transition`定义了元素从一种...

    纯CSS3实现DIV高亮显示特效

    在这个例子中,当鼠标悬停在`div`上时,背景颜色会从灰色平滑过渡到黄色,同时边框宽度也会增加,形成高亮效果。 总结来说,纯CSS3实现的DIV高亮显示效果充分利用了CSS3的新特性,使得网页元素的交互变得更加生动...

    flex实现边框

    在Flex编程中,创建具有边框和标题的组件是一项常见的任务。Flex是一种基于ActionScript的开源框架,主要用于构建富互联网应用程序(RIA)。本篇文章将详细解释如何使用Flex来实现边框以及添加标题,并重点关注在...

    H5 SVG边框特效

    本教程将深入探讨如何利用SVG来实现DIV边框特效,使你的网页元素更具视觉吸引力。 1. **SVG简介** SVG是一种基于XML的矢量图形格式,它允许开发者创建高质量的图形,无论放大多少倍都不会失真。SVG支持动画、样式、...

    纯JS控制DIV选择范围移动与复制(改进版)

    &lt;br&gt;未选择状态下,单击在背景上按住左键拖动产生范围虚线框,在此范围虚线框内的DIV边框变粗变色为被选中,虚线框外的则不被选中。 &lt;br&gt;已选择状态下,按住Ctrl可再次选择,按住Ctrl的同时,单击在DIV上,...

Global site tag (gtag.js) - Google Analytics