/* 這段程式碼實現了當滑鼠滑過連結時的漸變效果*/
a {
color: #007c21;
transition: color .4s ease;
}
a:hover { color: #00bf32; }使用CSS3可以在不引入額外的標記或圖像的情況下，為大多數元素(包括表單元素、圖像，甚至段落文字)建立圓角。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Rounded Corners</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <body> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </body> </html>
使用CSS圓角的四個例子，包含了必要的廠商前綴以支援舊版的Android、Mobile Safari和Safari瀏覽器。對於.circle ，使用75px與50%的效果是一樣的，因為該元素的大小為150像素*150像素。
div {
background: #999;
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
.all-corners {
-webkit-border-radius: 20px;
border-radius: 20px;
}
.one-corner {
-webkit-border-top-left-radius: 75px;
border-top-left-radius: 75px;
}
.elliptical-corners {
-webkit-border-radius: 50px / 20px;
border-radius: 50px / 20px;
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
} div {
background: #ff9;
border: 5px solid #326795;
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
.example-1 {
/* Makes the radius of the top-left and bottom-right corners 10px and
the top-right and bottom-left corners 20px */
border-radius: 10px 20px;
}
.example-2 {
/* Makes the radius of the top-left corner 20px, and all other corners 0 */
border-radius: 20px 0 0;
}
.example-3 {
/* Makes the radius of the top-left corner 10px, the top-right corner 20px,
the bottom-right corner 0, and the bottom-left corner 30px */
border-radius: 10px 20px 0 30px;
}-webkit-border-radius: r ，這裡的r是圓角的半徑大小，表示為長度(帶單位)。輸入border-radius: r ，這裡的r是圓角的半徑大小，使用與第一步驟相同的值。這是該屬性的標準短形式語法。-webkit-border-top-left-radius: r ，這裡的r是左上方圓角的半徑大小，表示為長度(帶單位)。輸入border-top-left-radius: r ，這裡的r使用與第一步驟相同的值。這是該屬性的標準長形式語法。建立右上方圓角使用top-right ；建立右下方圓角使用bottom-right ；建立左下方圓角使用bottom-left 。-webkit-border-radius: x/y ，其中x是圓角在水平方向上的半徑大小， y是圓角在垂直方向上的半徑大小，均表示為長度(帶單位)。輸入border-radius: x/y ，其中x和y跟第一步中的值相等。-webkit-border-radius: r這裡的r是元素的半徑大小(帶長度單位)。要建立圓形，可以使用短形式的語法， r的值應該等於元素高度或寬度的一半。輸入border-radius: r這裡的r是元素的半徑大小(帶長度單位)，跟第一步驟中的r相等。這是標準的無前綴語法。註：不支援border-radius的舊的瀏覽器僅會以方角呈現元素。 border-radius僅影響施加該樣式的元素的角，不會影響其子元素的角。因此如果一個子元素有背景，則該背景就有可能顯示在一個或多個父元素的角的位置，從而影響圓角樣式。有時元素的背景(這裡講的不是子元素的背景)會透過其圓角。為了避免這種情況，可以在元素的border-radius宣告後面增加一條樣式規則： background-clip: padding-box; 。
使用text-shadow可以在不使用圖像表示文字的情況下，為段落、標題等元素中的文字添加動態的陰影效果。
text-shadow: 。分別輸入表示x-offset (水平偏移量)、 y-offset (垂直偏移量)、 blur-radius (模糊半徑)和color的值(前三個值帶長度單位，四個值之間不用逗號分隔)，例如-2px 3px 7px #999 。text-shadow: 。分別輸入x-offset (水平偏移量)、 y-offset (垂直偏移量)、 blur-radius (模糊半徑)和color的值(前三個值帶長度單位，四個值之間不用逗號分隔)。 blur-radius的值是可選的。輸入,(逗號)。對四種屬性使用不同的值重複第二步。<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Text Shadow</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <body> <p class="basic">Basic Shadow</p> <p class="basic-negative">Basic Shadow</p> <p class="blur">Blur Radius</p> <p class="blur-inversed">Blur Radius</p> <p class="multiple">Multiple Text Shadows</p> </body> </html>
body {
background: #fff;
color: #222;
font: 100%/1.05 helvetica, sans-serif;
padding-top: 20px;
}
p {
color: #222; /* nearly black */
font-size: 4.5em;
font-weight: bold;
margin: 0 0 45px;
}
p:last-child {
margin: 0;
}
.basic {
text-shadow: 3px 3px #aaa;
}
/* uses negative offsets--you can mix positive and negative ones, too. */
.basic-negative {
text-shadow: -4px -2px #ccc; /* a little lighter grey than #aaa */
}
.blur {
text-shadow: 2px 2px 10px grey;
}
.blur-inversed {
color: white;
text-shadow: 2px 2px 10px #000; /* black */
}
/* this example has two shadows, but you can include
more by separating each with a comma */
.multiple {
text-shadow:
2px 2px white,
6px 6px rgba(50,50,50,.25);
}這些類別示範了幾種text-shadow的效果。第一個、第二個和第五個都省略了模糊半徑的值。 .multiple類別告訴我們，可以為單一元素添加多個陰影樣式，每組屬性之間用逗號分隔。這樣，透過結合使用多個陰影樣式，可以創造出特殊而有趣的效果。
即輸入text-shadow: none; ，這個屬性不需要輸入使用廠商前綴。
text-shadow屬性接受四個值：帶長度單位的x-offset 、帶長度單位的y-offset 、可選的帶長度單位的blur-radius以及color值。如不指定blur-radius ，將假定其值為0。 x-offset和y-offset值可以是正整數也可以是負整數，也就是說1px和-1px都是有效的。 blur-radius值必須是正整數。這三個值都可以為0。儘管text-shadow的語法與邊框和背景屬性的語法是類似的，但它不能像邊框和背景那樣單獨的指定四個屬性值。如果不指定text-shadow ，它就會使用初始值none 。
使用text-shadow屬性可以為元素的文字添加陰影，使用box-shadow屬性則可以為元素本身添加陰影。他們的基礎屬性集是相同的，不過box-shadow還允許使用使用兩個可選的屬性： inset關鍵字屬性和spread屬性(用於擴張或收縮陰影)。
box-shadow屬性接受六個值：帶長度單位的x-offset和y-offset 、可選的帶長度單位的blur-radius 、可選的inset關鍵字、可選的帶長度單位的spread值及color值。如果不指定blur-radius和spread的值，則設為0。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Box Shadow</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <body> <div class="shadow"> <p>Shadow with Blur</p> </div> <div class="shadow-negative"> <p>Shadow with Negative Offsets and Blur</p> </div> <div class="shadow-spread"> <p>Shadow with Blur and Spread</p> </div> <div class="shadow-offsets-0"> <p>Shadow with Offsets Zero, Blur, and Spread</p> </div> <div class="inset-shadow"> <p>Inset Shadow</p> </div> <div class="multiple"> <p>Multiple Shadows</p> </div> <div class="shadow-negative-spread"> <p>Shadow with Blur and Negative Spread</p> </div> </body> </html>
body {
background: #000;
color: #fff;
}
h1 {
font-family: sans-serif;
font-size: 2.25em;
line-height: 1.1;
text-align: center;
}
/* NOTE: The background-image URLs are different below than in the example shown in the book, because I've placed the images in a sub-folder (called "img"), as is typical when organizing a site. Also is typical when organizing a site. Alsoso, I thought it would be helpful for you to see how to construct your background-image URLs under these circumstances. Note that the URLs are relative to where the style sheet lives, NOT the HTML page that is displaying the image. */
.night-sky {
background-color: navy; /* fallback color */
background-image:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
background-position:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-x;
height: 300px;
margin: 25px auto 0; /* slightly different than book */
padding-top: 36px;
width: 75%;
}上面程式用於示範使用box-shadow添加一個或多個陰影的效果。前五個類別各自套用了一個彼此不同的陰影樣式。最後一個類別應用了兩個陰影(還可以應用更多個陰影)。不理解box-shadow的瀏覽器會直接忽略這些CSS樣式規則，呈現沒有陰影的頁面。
-webkit-box-shadow: 。分別輸入表示x-offset 、 y-offset 、 blur-radius 、 spread和color的值(前四個值均帶長度單位)，例如2px 2px 5px #333 。輸入box-shadow: ，再重複第二步。-webkit-box-shadow: 。分別輸入表示表示x-offset 、 y-offset 、 blur-radius 、 spread和color的值(前四個值均帶長度單位)，例如2px 2px 5px #333 。在冒號後輸入inset ，再輸入一個空格(也可以在第二步之前輸入inset和一個空格)。輸入box-shadow: ，再重複第二步和第三步。-webkit-box-shadow: 。分別輸入表示表示x-offset 、 y-offset 、 blur-radius 、 spread和color的值(前四個值均帶長度單位)，例如2px 2px 5px #333 。如果有必要，將inset關鍵字包含在內。輸入逗號。對每種屬性使用不同的值重複第二步。輸入box-shadow: ，再重複第二步至第四步。-webkit-box-shadow: none; 。輸入box-shadow: none; 。註： x-offset 、 y-offset和spread值可以是正整數，也可以是負整數。 blur-radius值必須是正整數。這三個值都可以為零。 inset關鍵字可以讓陰影位於元素內部。
多重背景幾乎可以應用於任何元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Multiple Backgrounds</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </head> <body> <div class="night-sky"> <h1>In the night sky...</h1> </div> </body> </html>
……
.night-sky {
background-color: navy; /* fallback color */
background-image:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
background-position:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-x;
height: 300px;
margin: 25px auto 0; /* slightly different than book */
padding-top: 36px;
width: 75%;
}為單一元素套用多重背景影像(不需要使用廠商前綴)
輸入background-color: b ，這裡的b是希望為元素套用的備用背景顏色。輸入background-image: u ，這裡的u是絕對或相對路徑引用的url列表(用逗號分隔。支援多重背景的瀏覽器，圖像是分層次相互重疊在一起的，用逗號分隔的列表中的第一center top y-offset background-position: p x-offset p )的集合，用逗號分隔。對於第二步驟中指定的每個url ，都應有一組x-offset和y-offset 。輸入background-repeat: r ，這裡的r是repeat-x 、 repeat-y或no-repeat值，用逗號分隔，第二步驟中指定的每個url對應一個值。對於多重背景影像，可以使用標準的短形式語法，即使用逗號分隔每組背景參數。這種表示方法的好處是開發者既可以指定備用背景顏色，也可以為舊的瀏覽器指定圖像。
.night-sky {
/* fallback with both a color and image */
background: navy url(../img/ufo.png) no-repeat center bottom;
/* for supporting browsers */
background:
url(../img/ufo.png) no-repeat 50% 102%,
url(../img/stars.png) no-repeat 100% -150px,
url(../img/stars.png) no-repeat 0 -150px,
url(../img/sky.png) repeat-x 50% 100%;
height: 300px;
margin: 25px auto 0;
padding-top: 36px;
width: 75%;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Gradient Backgrounds</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <body> <div class="vertical-down"><p>default</p></div> <div class="vertical-up"><p>to top</p></div> <div class="horizontal-rt"><p>to right</p></div> <div class="horizontal-lt"><p>to left</p></div> <div class="angle-bot-rt"><p>to <br />bottom right</p></div> <div class="angle-bot-lt"><p>to <br />bottom left</p></div> <div class="angle-top-rt"><p>to top right</p></div> <div class="angle-top-lt"><p>to top left</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <section class="radial"> <div class="radial-center"><p>default</p></div> <div class="radial-top"><p>at top</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% at <br />bottom left</p></div> <div class="radial-various-1"><p>various 1</p></div> <div class="radial-various-2"><p>various 2</p></div> </section> <section class="color-stops"> <div class="color-stops-1"><p>yellow 10%, green</p></div> <div class="color-stops-2"><p>to top right, yellow, <br>green 70%, <br>blue</p></div> </section> </body> </html>
body {
padding: 1.25em; /* 20px/16px, so 20px on each side */
font-size: 100%;
}
div {
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
p {
color: #fff;
font: bold 1.25em/1 sans-serif; /* 20px/16px */
padding-top: 1.65em; /* 33px/16px */
text-align: center;
}
/* NOTE: The gradients below are in the standard CSS3 syntax. The browsers that support them are Chrome 26+, Firefox 16+, IE 10+, and Opera 12.10+. See gradients-with-browcss-prefies. gradient effects, but with the vendor prefix code also included so the gradients will work on several older browsers.A background with a "fallback" comment is the color that will show in browsers that don't support the gradient syntax. can can le on its own or in combination with a color).For example, background: red url(gradient-image.jpg) no-repeat;. */
/* LINEAR GRADIENTS
------------------------------------------ */
/* :::: Vertical :::: */
.vertical-down {
background: silver; /* fallback */
/* default gradient, so you don't need to specify "to bottom" before the colors */
background: linear-gradient(silver, black);
}
.vertical-up {
background: silver;
background: linear-gradient(to top, silver, black);
}
/* :::: Horizontal :::: */
.horizontal-rt {
background: silver; /* fallback */
background: linear-gradient(to right, silver, black);
}
.horizontal-lt {
background: silver; /* fallback */
background: linear-gradient(to left, silver, black);
}
/* :::: Diagonal Angles :::: */
/* Note: The figures on page 377 show aqua as the fallback color, but I've switched it
to navy below because the white text will be easier to read on a navy background. */
.angle-bot-rt {
background: navy; /* fallback */
background: linear-gradient(to bottom right, aqua, navy);
}
.angle-bot-lt {
background: navy; /* fallback */
background: linear-gradient(to bottom left, aqua, navy);
}
.angle-top-rt {
background: navy; /* fallback */
background: linear-gradient(to top right, aqua, navy);
}
.angle-top-lt {
background: navy; /* fallback */
background: linear-gradient(to top left, aqua, navy);
}
/* :::: Angles via Degrees :::: */
.angle-120deg {
background: navy; /* fallback */
background: linear-gradient(120deg, aqua, navy);
}
.angle-290deg {
background: navy; /* fallback */
background: linear-gradient(290deg, aqua, navy);
}
/* RADIAL GRADIENTS
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
text-shadow: 0 0 3px #000;
}
.radial-center {
background: red; /* fallback */
background: radial-gradient(yellow, red); /* default */
}
.radial-top {
background: red; /* fallback */
background: radial-gradient(at top, yellow, red);
}
.radial-size-1 {
background: red; /* fallback */
background: radial-gradient(100px 50px, yellow, red);
}
.radial-size-2 {
background: red; /* fallback */
background: radial-gradient(70% 90% at bottom left, yellow, red);
}
.radial-various-1 {
background: red; /* fallback */
background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
}
.radial-various-2 {
background: red; /* fallback */
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red);
}
/* LINEAR GRADIENTS WITH COLOR STOPS
------------------------------------------ */
.color-stops div {
margin-bottom: 30px;
}
.color-stops p {
padding-top: 25px;
text-shadow: 0 0 3px #000;
}
.color-stops-2 p {
font-size: 18px;
line-height: 1.05;
}
.color-stops-1 {
background: green; /* fallback */
background: linear-gradient(yellow 10%, green);
}
.color-stops-2 {
background: green; /* fallback */
background: linear-gradient(to top right, yellow, green 70%, blue);
}輸入background: color或background-color: color ，這裡的color可以是十六進制數、RGB值以及其他任何支援的顏色名稱，另外也可以使用圖像。最好不要將RGBA、HSL或HSLA值作為備用背景顏色(如果你不打算支援IE則不必在意)，因為IE8及以前的版本不支援。
background: linear-gradient( 。如果希望漸變方向是從上向下(預設方向)，則可以跳過這一步。輸入方向後面加一個逗號，方向指to top 、 to right 、 to bottom right 、 to top right等45deg的值。 107deg等); 。background: radial-gradient( 。指定漸變的形狀。希望指定尺寸則可根據第三步驟中指定的尺寸自行確定。否則輸入circle或ellipse 。指定漸變的尺寸。如果希望尺寸為自動指定的值(預設值為·farthest-corner·，最遠的角)， 7em跳過200px步驟。 )或closest-side寬度和closest-corner的一對值( 390px 175px farthest-side farthest-corner 60% 85% )。 farthest-corner 。 at top at right at bottom left at top right at at 200px 43px 、 ); at 30% 40% 、 at 50% -10px等。使用opacity屬性可以修改元素的透明度。方法是輸入opacity: x ,這裡的x表示元素元素的不透明程度(兩位小數，不帶單位)。
opacity的預設值為1(完全不透明)，範圍為0~1 。
透過使用opacity屬性和:hover偽屬性，可以產生一些有趣且實用的效果。例如img { opacity: .75; }預設可以將圖片設定為75%的不透明度， img:hover { opacity: 1; }可導致使用者滑鼠停留在元素上時元素變為不透明。在將縮圖連結到全尺寸版本時經常看到這種效果。對於訪客來說，懸浮可增強影像的動態。
opacity屬性與使用RGBA或HSLA設定的透明背景色是兩個容易混淆的概念。 opacity影響的是整個元素(包括其內容)，而background-color: rgba(128,0,64,.6);這樣的設定只影響背景的透明度。
使用:before和:after偽元素可以很方便地為頁面添加一些令人難以置信的設計效果。它們可以與content屬性結合使用，從而創建所謂的生成內容。產生內容指的是透過CSS創建的內容而不是HTML產生的。
…… <p>This area is one of the most tranquil spaces at the Villa. As I wandered around, enjoying shade provided by sycamore and laurel trees and serenaded by splashing water from two sculpt fountains, I couldn' by splashing water from two sculpta fountains, I couldn' hel href="victoria.html" class="more">Read More</a></p> ……
/* The generated content */
.more:after {
content: 「 »";
}透過上面程式碼，可以讓有class="more"的元素會在其後顯示一個雙箭頭，以後如需變動，修改也只需要修改.more類別即可，而不需要改動大量的HTML頁。
瀏覽器中文字顯示速度很快，但是圖像往往會減慢頁面的載入速度。要解決這個問題，可以將多個影像拼合成單一背景影像( sprite )，再透過CSS控制具體顯示影像的哪一部分，使用的就是background-position屬性。
.documents li {
margin-top: .45em;
}
/* Each link in the HTML has this class */
.icon {
display: inline-block;
line-height: 1.1;
font-size: .875em;
min-height: 16px; /* set to height of icon so it isn't cut off at all */
padding-left: 23px;
padding-top: 2px;
/* allows positioning the icon absolutely relative to elements with class="icon" in the HTML */
position: relative;
}
.icon:before {
background-image: url(../img/sprite.png);
content: " ";
display: block;
height: 16px; /* icon height */
left: 0; /* default. change this if want the icon to appear in different spot */
position: absolute;
width: 16px; /* icon width */
top: 0; /* default. change this if want the icon to appear in different spot */
}
/* Shift position of sprite image for any document filename that ends with .xls */
a[href$=".xls"]:before {
background-position: -17px 0;
}
/* Shift position of sprite image for any document filename that ends with .docx */
a[href$=".docx"]:before {
background-position: -34px 0;
}可以將sprite用於任意數量的元素。在上面這個例子中，使用.icon:before來實現所需的效果。這樣sprite就是透過content: " ";產生的空格的背景圖片。將其設為display: block; ，從而可以設定與圖示大小相符的高度和寬度。沒有這三個屬性，圖像將不會顯示。透過使用background-position ，可以將正確的圖示放入該位置。
到此這篇關於使用CSS3進行樣式效果增強的文章就介紹到這了,更多相關CSS3樣式效果增強內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes. com！