DIV边框样式设置

news/2024/10/21 10:20:39/
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: 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>


http://www.ppmy.cn/news/856590.html

相关文章

DIV四个边框分别设置阴影样式

原点为基点&#xff0c;原点左侧为x轴负方向&#xff0c;值为负&#xff0c;右侧为正&#xff1b;原点下方为y轴正方向&#xff0c;值为正&#xff0c;上方为负。如上图箭头所指。 官方用语&#xff1a; box-shadow:1px 2px 3px 4px #ccc inset&#xff1b; 来分别看一下…

CSS 边框颜色

CSS 边框颜色 <!DOCTYPE html> <html> <head> <style> p.one {border-style: solid;border-color: #ff0000; /* 红色 */ }p.two {border-style: solid;border-color: #0000ff; /* 蓝色 */ }p.three {border-style: solid;border-color: #bbbbbb; /* 灰…

简单的CSS设置div边框样式

今天工作干完了&#xff0c;想到前几天一个CSS新手让我帮他美化一下他的Div边框&#xff0c;索引想到不如写一个CSs小教程 &#xff0c;帮助更多的CSs新手学会以如何用CSS来美化网页上的边框&#xff0c;不只是Div&#xff0c;其实其它元素的美化方法和Div是一样的&#xff0c;…

html的边框设置

目录 理论知识&#xff1a; 示例一&#xff1a;简单边框 示例二&#xff1a;边框和表格 示例三&#xff1a;边框和图片 示例四&#xff1a;边框和文章 理论知识&#xff1a; 边框的写法&#xff1a; border: 边框的宽度 样式 颜色; 边框的四种样式&#xff1a;solid…

html圆点边框颜色,css设置div边框颜色

div边框色调 css设置装备摆设div边框色采 使用css对div边框设置色采是思空见贯CSS花式设置装备摆设。对div边框颜色设置说需要css单词为border。 去领会干系教程&#xff1a;《CSS边框》教程 一、div四条边的边框颜色配置 如果不设置边框宽度粗细&#xff0c;只配置border-colo…

div盒子双线边框线内的颜色处理方法

本人是萌新一枚&#xff0c;刚刚接触h5c3&#xff0c;如有不足&#xff0c; 请各位大佬多多指教&#xff01; 这个问题是我在写作业时发现的&#xff0c;我以为有什么属性可以去控制双线边框线内的颜色&#xff0c;我在CSDN上搜了之后并没有发现有什么可以去解决这个问题的方法…

html中div边界线颜色,Html 中如何设置 div边框的颜色?

回答&#xff1a; div的visibility可以控制div的显示和隐藏&#xff0c;但是隐藏后页面显示空白: 1 2 3 style"visibility:none;" document&#xff0c;getElementById("typediv1")&#xff0c;style&#xff0c;visibility"hIDden";//隐藏 docu…

Linux驱动进阶(三)——中断与时钟机制

文章目录 前言中断简述中断的概念中断的宏观分类中断产生的位置分类同步和异步中断中断小结 中断的实现过程中断信号线(IRQ)中断控制器中断处理过程中断的安装与释放 按键中断实例按键设备原理图有寄存器设备和无寄存器设备按键设备相关端口寄存器 按键中断实例程序分析按键驱动…