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

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
                    
                                                                                                    
                            六七企业网站管理系统(67CMS)2.0                            
经过一年的开发更新与升级，67CMS2.0版正式上线67cms 2.0的变革1.不再需要授权，商业用户免费使用！！2.栏目分类的级别添加至四级3.单页的级别添加至四级4.新增加人才招聘模块，招聘也可进行分类检索，采用公用的分类调用5.图集采用新的js效果调用6.英文版后台已翻译完毕，可无限添加语言包7.其他N多细节修改，与Bug修复不做详细介绍了
                            
                                                                0                            
                        
                                                    查看详情                                                                        
                
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 itto 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;}