CSS3基础教程：圆角、不透明度、阴影与自定义背景-优快云博客

View Code

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<style>
        #wrapper {
            width: 100%;
            height: 100%;
}
        div {
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
}
        #round {
            -moz-border-radius: 10px;
            -webkit-border-radius: 11px;
            border: 1px solid #000;
            background-color: #000;
}
        #indie {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-bottomleft: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-bottom-left-radius: 10px;
            border: 1px;
            solid #000;
            background-color: #000;
}
        #opacity {
            opacity: 0.3;
            background-color: #000;
}
        #shadow {
            border: 1px solid #000;
            background-color: #fff;
            -webkit-box-shadow: 3px 5px 10px #ccc;
            -moz-box-shadow: 3px 5px 10px #ccc;
}
        #resize {
            background-color: #fff;
            border: 1px solid #000;
            resize: both;
            overflow: auto;
            max-width: 500px;
            max-height: 500px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="round"></div>
<div id="indie"></div>
<div id="opacity"></div>
<div id="shadow"></div>
<div id="resize"></div>
</div>
</body>
</html>