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>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xuwenwu/archive/2007/03/27/1542298.aspx
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xuwenwu/archive/2007/03/27/1542298.aspx
分享到:
相关推荐
鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态...
div边框加文字效果
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
几种常见的DIV边框样式
几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar...
CSS圆角有立体感的DIV边框! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
简单明了div边框css动画简单明了div边框css动画简单明了div边框css动画
鼠标悬停div边框动画 jquery鼠标悬停div边框动画 6个动画类型
两种实现方法一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮。 简单一点的纯css 复制代码代码如下: <head> ”content-type”content ...
js动态给div加线性边框,个人蛮喜欢的一个效果
3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果:横向文字覆盖、纵向文字覆盖 6.聚集效果:普通聚集、猫耳朵、熊耳朵等等更多样式 7.波纹效果:...
效果预览 http://www.lzlu.com/Google/js/box/box.html<br><br>以前刚刚学div css的时候老不知道这种漂亮的框该如何布局 今天心血来潮,扒了EXT瞧了瞧,原来这么简单 放在这里,嘿嘿,不要笑话 只是希望没...
鼠标放到div搭建的框下,DIV框出现不断抖动效果,鼠标移走后抖动消失。 适合用在一些需要特别注意的内容部分
div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效
NULL 博文链接:https://javapub.iteye.com/blog/711781
纯CSS3实现的DIV高亮显示效果,无图片
3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果:横向文字覆盖、纵向文字覆盖 6.聚集效果:普通聚集、猫耳朵、熊耳朵、流光聚集 自定义内容丰富,...
AS 类绘制边框 以及添加标题 标题框 中的文本
<br>未选择状态下,单击在背景上按住左键拖动产生范围虚线框,在此范围虚线框内的DIV边框变粗变色为被选中,虚线框外的则不被选中。 <br>已选择状态下,按住Ctrl可再次选择,按住Ctrl的同时,单击在DIV上,...