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

zoukankan html css js c++ java

一些自己杂乱的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’)"> </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">

</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>

查看全文

相关阅读:
[noip2018]day1
[CF1110d]JONGMAH
BZOJ 2733 [HNOI2012]永无乡
 BZOJ 3123 [SDOI2013] 森林
 Nowcoder 练习赛26E 树上路径
 Luogu 2575 高手过招-SG函数
 BZOJ 1123[POI2008]BLO-Tarjan
Nowcoder OI赛制测试2 F 假的数学题
 Luogu 2467[SDOI2010]地精部落
 Luogu 2216[HAOI2007]理想的正方形

原文地址：https://www.cnblogs.com/it563/p/584379.html