• 一些自己杂乱的CSS样式收集!


    <style type="text/css">
     BODY {
      SCROLLBAR-FACE-COLOR: #FFFFFF;
      SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
      SCROLLBAR-SHADOW-COLOR: #999999;
      SCROLLBAR-3DLIGHT-COLOR: #999999;
      SCROLLBAR-ARROW-COLOR: #999999;
      SCROLLBAR-TRACK-COLOR: #FFFFFF;
      SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF
     }
     .TextBox {
      font-size: 12px;
      color: #666666;
      border: 1px dashed #DDDDDD;
      text-decoration: none;
     }
     .TextBox_Select {
      font-size: 12px;
      color: #666666;
      border: 1px dashed #666666;
      text-decoration: none;
     }
     .TextBox_Touch {
      font-size: 12px;
      color: #666666;
      border: 1px solid #FF7F7F;
      text-decoration: none;
     }
     .Button {
      FONT-SIZE: 12px;
      COLOR: #666666;
      text-decoration: none;
      BACKGROUND-COLOR: #FFFFFF;
      border: 1px solid #999999;
     }
     .Button_Select {
      FONT-SIZE: 12px;
      COLOR: #FFFFFF;
      text-decoration: none;
      BACKGROUND-COLOR: #CCCCCC;
      border: 1px solid #999999;
     }
     .Text01 {
      font-size: 12px;
      color: #666666;
      text-decoration: none;
     }
    </style>

    <html xmlns:v>
    <head>
    <style>
    v\:*{behavior: url(#default#VML);}
    </style>
    </head>
    <body>
    <v:roundRect style="position:absolute;left:20px;top:50px;200px;height:140px;" FillColor="#e8e8e8" Filled="T" />
    刷新本页才能看到效果
    </body>
    </html>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Nifty Corners: HTML CSS rounded corners</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    body{padding: 20px;background-color: #FFF;
        font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
    h1,h2,p{margin: 0 10px}
    h1{font-size: 250%;color: #FFF}
    h2{font-size: 200%;color: #f0f0f0}
    p{padding-bottom:1em}
    h2{padding-top: 0.3em}
    div#nifty{ margin: 0 10%;background: #9BD1FA}

    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;
        overflow: hidden; background: #9BD1FA}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    </style>
    </head>
    <body>
    <div id="nifty">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <h1>Nifty Corners</h1>
    <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
    <h2>Rounded corners without images</h2>
    <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
    ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
    <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
    uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
    <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
    auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
    uaeuueuu eeue ieu.</p>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    </body>
    </html>

    渐变CSS
        <td width="963" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#89A7FF,endColorStr=#FFFFFF, gradientType=’1’)">&nbsp;</td>


    按钮样式:
    <STYLE type=text/css>
    .formbutton
    {
    BORDER-RIGHT: #7b9ebd 1px solid;
    PADDING-RIGHT: 5px;
    padding-top:2px;
    BORDER-TOP: #7b9ebd 1px solid;
    PADDING-LEFT: 5px;
    FONT-SIZE: 10pt;
    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
    BORDER-LEFT: #7b9ebd 1px solid;
    CURSOR: hand;
    BORDER-BOTTOM: #7b9ebd 1px solid
    }

    </STYLE>

    1、DropShadow
    语法:{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
    Color 代表投影的颜色,格式为“#RRGGBB”
    OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值,正数代表x轴的右方向和y轴的下方向。负值相反。
    Positive 参数是一个布尔值。值为true(非0),那么就为任何的非透明像素建立可见的投影。如果值为false(0),那么就为透明的像素部分建立可见的投影。
    2、Shadow
    语法:{FILTER:Shadow(Color=color,Direction=direction)}
    Color 代表阴影的颜色,格式为“#RRGGBB”
    Direction是设置投影的方向,按照顺时针方向进行,0度代表垂直向上,然后每45度为一个单位。默认值是向左的270度。共8个方向。

    两种特效的用法,一起写了。
    在CSS里定义类,第一种是投影,第二中是阴影。数值可以自己调整,上面有详细介绍。

    .dropshadow { filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
    .shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip: rect( )}

    定义到字体。

    dropshadow - 用CSS做投影效果
    shadow - 用CSS做阴影效果
    有喜欢的朋友可以放在自己的页面中看下效果颜色字体据自己喜好调用。

     程序代码
    <html>
    <head>
    <title>www.dodocn.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    .dropshadow { filter: DropShadow(Color=green, OffX=1, OffY=1, Positive=1); position: absolute;

    font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
    .shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight:

    bolder ; left: 350px; top: 20px; clip: rect( )}
    -->
    </style>
    </head>

    <body>
    <div class="dropshadow">dropshadow - <a href="http://www.dodocn.com">用<a href="http://www.suoxie.com/?css" target="_blank">CSS</a>做投影效果</a></div>
    <div class="shadow">shadow - 用<a href="http://www.suoxie.com/?css" target="_blank">CSS</a>做阴影效果</div>
    </body>
    </html>


    西陆社区的CSS样式
    p {line-height: 150%}
    td {font-family: "宋体"; font-size: 9pt; color: #000000}
    ul {font-size: 12px; line-height: 180%; color: #CC0000}
    .grey {font-size:9pt; color:#999999}
    .white {  color: #FFFFFF}
    .ora {  color: #FF6600}
    .white10 {  font-size: 10pt; color: #FFFFFF}
    .orange {  color: #FFCC33; font-size: 10pt; font-weight: bold}
    .y10 {  color: #ffff00; font-size: 10pt}
    .b10 {  color: #000000; font-size: 10pt}

    a:link {  color: #000000}
    a:visited {  color: #333399}
    a:hover {  color: #FF9933}

    .t1 {FILTER: Glow(Color=#000000, Strength=1); FONT-FAMILY: "宋体"; FONT-SIZE: 12px; LETTER-SPACING: 1px}
    .t2 {FILTER: Glow(Color=#eeeeee, Strength=1); FONT-FAMILY: "宋体"; FONT-SIZE: 12px; LETTER-SPACING: 1px}
    .t3 {FILTER: Glow(Color=#094A70, Strength=1); FONT-FAMILY: "宋体"; FONT-SIZE: 12px; LETTER-SPACING: 1px}
    .t5 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 11px}


    A.g2g:link { color: #FFCCFF; text-decoration: none}
    A.g2g:visited { color: #FFCCFF; text-decoration: none}
    A.g2g:hover {color: #FFCCFF; text-decoration: underline}


    .form {  background-color: #FFF7FF; height: 22px; 150px; border: 1px solid; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 14px; color: #CC0099; border-color: 6f0037 6f0037 6f0037 #6F0037}
    .go {  font-size: 12px; background-color: #efefef; border: 1px #666666 solid; height: 18px; 45px; font-family: "宋体"}

    A.w2g1:link {  color: #999999; text-decoration: none}
    A.w2g1:visited {  color: #999999; text-decoration: none}
    A.w2g1:hover {  color: #ffffff; text-decoration: none; background-color:#999999}

    .yinying { FONT-SIZE: 9pt; FILTER: dropshadow(color=#ffffff,offx=1,offy=1); COLOR: #860650; FONT-FAMILY: "宋体" }
    li {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; line-height: 150%; color: #CC0000}
    li {  }

    css实现背景图片
    BODY {
     BACKGROUND-POSITION: center 50%; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(http://images.51job.com/im/bg.gif); MARGIN: 0px; BACKGROUND-REPEAT: repeat-y
    }

    <style>
    .btn {
     border-right: #7b9ebd 1px solid; padding-right: 2px; border-top: #7b9ebd 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#cecfde); border-left: #7b9ebd 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7b9ebd 1px solid
    }
    .btn1_mouseout {
     border-right: #7ebf4f 1px solid; padding-right: 2px; border-top: #7ebf4f 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#b3d997); border-left: #7ebf4f 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7ebf4f 1px solid
    }
    .btn1_mouseover {
     border-right: #7ebf4f 1px solid; padding-right: 2px; border-top: #7ebf4f 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#cae4b6); border-left: #7ebf4f 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7ebf4f 1px solid
    }
    .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-1;}
    .btn3_mouseout {
     border-right: #2c59aa 1px solid; padding-right: 2px; border-top: #2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#c3daf5); border-left: #2c59aa 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2c59aa 1px solid
    }
    .btn3_mouseover {
     border-right: #2c59aa 1px solid; padding-right: 2px; border-top: #2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#d7e7fa); border-left: #2c59aa 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2c59aa 1px solid
    }
    .btn3_mousedown
    {
     border-right: #ffe400 1px solid; padding-right: 2px; border-top: #ffe400 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#c3daf5); border-left: #ffe400 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #ffe400 1px solid
    }
    .btn3_mouseup {
     border-right: #2c59aa 1px solid; padding-right: 2px; border-top: #2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#c3daf5); border-left: #2c59aa 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2c59aa 1px solid
    }
    .btn_2k3 {
     border-right: #002d96 1px solid; padding-right: 2px; border-top: #002d96 1px solid; padding-left: 2px; font-size: 12px; filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#9dbcea); border-left: #002d96 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #002d96 1px solid
    }
    </style>
    <body>

    <button class=btn title="好看的按钮">好看的按钮</button><p></p>
    <button
    class=btn1_mouseout onmouseover="this.classname='btn1_mouseover'"
     onmouseout="this.classname='btn1_mouseout'"
     title="好看的按钮">好看的按钮</button>  !amp;nbsp;
    <button
    class=btn1_mouseout onmouseover="this.classname='btn1_mouseover'"
     onmouseout="this.classname='btn1_mouseout'" disabled>好看的按钮</button>
    <p>
    <button class=btn2 title="好看的按钮">好看的按钮</button>
    <p>
    <button class=btn3_mouseout onmouseover="this.classname='btn3_mouseover'"
     onmouseout="this.classname='btn3_mouseout'"
     onmousedown="this.classname='btn3_mousedown'"
      onmouseup="this.classname='btn3_mouseup'"
      title="好看的按钮">好看的按钮</button>
    <p>
    <button class=btn_2k3 title="好看的按钮">好看的按钮</button>

    我在表格里加了一个textarea,但我写的css把其余3条边框都去掉了,唯独剩下一个滚动条,实在难看,请问各位有何高招? 
    --------------------------------------------------------------- 
     
    <textarea  style="overflow:  auto">

    表格阴影
    <table width=238 height=100 align=left bordercolor="#FF9966" bgcolor=#f3f3f3
    style="filter:progid:DXImageTransform.Microsoft.Shadow
    (Color=#333333,Direction=120,strength=5)">
    <tr>
    <td width="230" bgcolor="#FF9966"><center>
    <a href="http://www.sucai86.com" target="_blank">www.sucai86.com</a>
    </center></td>
    </tr>
    </table>

  • 相关阅读:
    UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例
    Android aidl Binder框架浅析
    AIDL
    android 五种存储方式
    Android进程间通信机制
    Service全面总结
    Android平台中关于音频播放
    Android广播机制
    Cursor,CursorAdapter中的观察者模式解析
    ContentProvider和Uri详解
  • 原文地址:https://www.cnblogs.com/it563/p/584379.html
Copyright © 2020-2023  润新知