/* 这段代码实现了当鼠标滑过链接时的渐变效果 */ a { color: #007c21; transition: color .4s ease; } a:hover { color: #00bf32; }

Android、Mobile Safari和Safari浏览器。对于.circle，使用75px与50%的效果是一样的，因为该元素的大小为150像素*150像素。

p { 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%; }

p { 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; }

      
  
Basic Shadow
 
Basic Shadow
 
Blur Radius
 
Blur Radius
 
Multiple Text Shadows
  

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); }

      
  
 
Shadow with Blur
 
 
 
Shadow with Negative Offsets and Blur
 
 
 
Shadow with Blur and Spread
 
 
 
Shadow with Offsets Zero, Blur, and Spread
 
 
 
Inset Shadow
 
 
 
Multiple Shadows
 
 
 
Shadow with Blur and Negative Spread
 
  

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, 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%; }

      
  
 
In the night sky...
 
  

... .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%; }

.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%; }

      
  
default
 
to top
 
to right
 
to left
 
to 
bottom right
 
to 
bottom left
 
to top right
 
to top left
 
120deg
 
290deg
 
 
default
 
at top
 
100px, 50px
 
70% 90% at 
bottom left
 
various 1
 
various 2
 
 
 
yellow 10%, green
 
to top right, yellow, 
green 70%, 
blue
 
  

body { padding: 1.25em; /* 20px/16px, so 20px on each side */ font-size: 100%; } p { 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-browser-prefixes.css for the same 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. You can use a backgroundimage as a fallback as well (either 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 p { 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); }

... 
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 sculptural fountains, I couldn't help but think … Read More
 ...

/* The generated content */ .more:after { content: " »"; }

.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; }