DIV常用的几种边框样式!(转)
</head>
<body><p style=border-style:none>无边框</p><p style=border-style:dotted>点线式边框</p><p style=border-style:dashed>破折线式边框</p><p style=border-style:solid>直线式边框</p><p style=border-style:double>双线式边框</p><p style=border-style:groove>槽线式边框</p><p style=border-style:ridge>脊线式边框</p><p style=border-style:inset>内嵌效果的边框</p><p style=border-style:outset>突起效果的边框</p>
<br><br><br>
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>
关键字:php笔记,刘鹏博客
DIV常用的几种边框样式!(转)相关推荐
- C#图形窗口的几种边框样式,固定大小,及可调节大小等样式
1.点中C#图形编辑器中要编辑的窗口,可以在右边看到窗口的所有属性 2.可以看到,一共有以下几种样式: None:没有边框,即没有最小化.最大化.关闭的一些快捷按钮 FixedSingle:有边框,有 ...
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- CSS之背景样式及边框样式
1.背景样式 常用属性: background-color:背景颜色 background-image:背景图片 background-repeat:背景图片的平铺方式 background-posi ...
- css常用样式(文字样式、边框样式、背景样式)
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
- HTML-用css样式定义div的边框样式
我们都知道html中div定义的是一个块,有时候我们需要给这个块增加一些边框来达到我们所需要的要求. 1.如何定义边框 如下所示我用css定义了这个边框的属性 <style> .c{wid ...
- CSS3设置Div左右两边或者上下边框的样式
关于CSS3设置Div左右两边或者上下边框的样式 目前可以通过如下方法,实现div只显示某些边框. 1.border: 1px dashed lightgray; border-top: none; ...
- html语言中边框样式,html设置div边框样式css布局
html组织配置div边框格式教程篇 div设置边框花样所应用CSS款式为边框属性border. div虚线与完成边框款式图 一.决定兼容边框线条名堂 border边框兼容各大浏览器线条花样有: 1. ...
- DIV常用属性大全自己整理
一.属性列表 代码如下:color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
- 前端开发div常用属性标签大全
color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-varian ...
最新文章
- .Net2.0 使用ConfigurationManager读写配置文件
- form表单自动填充
- uniapp 的使用
- Android控件美化Shape
- iOS安全攻防(十七):Fishhook
- netty系列之:自定义编码解码器
- 使用树莓派 Raspberry Pi 播放豆瓣 FM
- 在执行某个行为时,其大脑是否产生了对应的稳定脑神经模式映射?如果存在稳定映射,是否能运用机器学习方法发现未知行为神经回路?
- 2023年山东大学社会工作考研成功上岸经验分享
- JAVA打卡记录计算时间
- 支付路由适配服务技术实现
- Prizmo Pro for Mac(OCR文字扫描识别软件)
- love2d环境搭配
- 13.56MHz非接触式读写器芯片:CI521(AB卡,低成本)
- PeopleSoft基础知识整理
- 如何使用一台电脑远程控制多台电脑
- 用C语言打印一个金字塔
- java添加zip并下载,java - 使用java创建zip并使其可下载。 - SO中文参考 - www.soinside.com...
- windows下Ubuntu使用chmod提示No such file or directory
- H5网页调用58热敏小票打印机实现打印小票