• 边框模拟小三角形


    利用边框模拟出小三角形,比较有创意。

    1. <style>
    1. * {
      font-size:14px;/*字体大小 */
      }
      span {
      display:block;
      font:0/0 "宋体";
      border:7px solid;/* border值越大,三角形越大 */
      border-color:#fff #fff #fff #444;/* 改变颜色产生不同效果 */
      margin-top:5px
      }
      </style>
      <div>
      <span></span>
      </div>

      刚才去试了下,发现好看是好看但不实用,不过它也提醒了我们有必要去重温一下border的样式属性:

      语法:
    border-color : color

      设置对象边框的颜色。

      如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。

      如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

      此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

      在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为absolute ,或者设定 display 属性为 block 。

      如果 border-style 设置为 none ,本属性将失去作用。对应的脚本特性为 borderColor 。


    试着把上例的:

    1. border-color:#fff #fff #fff #444;

    改为这样:

    1. border-color:#fff #444 #fff #444;

    慢慢理解吧;看到这我又不得不去看一下border-style及border-width引用手册如下:语法:


    border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 

      设置对象边框的样式。

      如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一

      个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如

      果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

      取值:

      none :  默认值。无边框。不受任何指定的 border-width 值影响

      hidden :  隐藏边框。IE不支持

      dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实

      线

      dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为

      实线

      solid :  实线边框

      double :  双线边框。两条单线与其间隔的和等于指定的 border-width 值

      groove :  根据 border-color 的值画3D凹槽

      ridge :  根据 border-color 的值画3D凸槽

      inset :  根据 border-color 的值画3D凹边

      outset :  根据 border-color 的值画3D凸边

      说明:

      此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

      在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使

      用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 a

      bsolute ,或者设定 display 属性为 block 。

      对应的脚本特性为 borderStyle 。

      语法:

      border-width : medium | thin | thick | length

      取值:

      medium :  默认值。默认宽度

      thin :  小于默认宽度

      thick :  大于默认宽度

      length :  由浮点数字和单位标识符组成的长度值。不可为负值。请参阅 长度单位

      

      说明:

      设置对象边框的宽度。

      如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。

      如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

      此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

      在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为

      absolute ,或者设定 display 属性为 block 。

      如果 border-style 设置为 none ,本属性将失去作用。对应的脚本特性为 borderWidth 。


  • 相关阅读:
    struts2的结果类型
    struts2的基本配置
    struts2拦截器
    struts2入门程序
    struts2工作原理
    Mysql处理字符串函数(转)
    oracle调用java方法的例子(下面所有代码都是在sql/plus中写)
    Oracle数据库中调用Java类开发存储过程、函数的方法
    Oracle触发器反向调用Java程序
    javaweb项目打包成war包
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3847683.html
Copyright © 2020-2023  润新知