• div 边框


    引用:http://qsfwy.iteye.com/blog/250237

    立体线框代码稍加润色后的效果:

    <div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge;
    border-bottom-style:Ridge;border- 7pt; background-color:#8B008B"><div style="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-2pt; border-color: red">
    <div style="100%;height:100%;background-color:#ffdead;">
    日志文字
    </div></div>

         使用上述语法将会为你呈现一个NAVAJO白底色红边框的浮出线效果背景,效果如框内显示。

    以下代码来源于:午後の紅茶博客
    简单线条边框,代码:<div style="border:1px solid #f990033;">文字内容</div>
    简单线条边框,代码:<div style="border-style:outset; border-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
  • 相关阅读:
    32位IP地址
    我们必须知道,我们终将知道。
    【Java 小白菜入门笔记 2.1】面向对象相关
    【Java 小白菜入门笔记 1.3】流程控制、数组和输入输出
    【Java 小白菜入门笔记 1.2】运算符、方法和语句
    【Java 小白菜入门笔记 1.1】常量和变量
    【论文笔记】PyTorch-BigGraph: A Large-scale Graph Embedding Framework(大规模图嵌入)
    【Java 小白菜入门笔记 1.0】简介与HelloWorld
    【NLP模型笔记】GloVe模型简介
    Python中的defaultdict函数
  • 原文地址:https://www.cnblogs.com/sode/p/2222329.html
Copyright © 2020-2023  润新知