一些自己雜亂的CSS樣式收集!

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width: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">
<!--
.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; width: 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; width: 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
}

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More