css

来源：互联网发布：小程序php源码下载编辑：程序博客网时间：2024/06/06 14:18

圆角：

#div1{ width:400px; height:400px; border:1px solid #333; border-radius:0 0 80px 200px; }

图片圆角：.main_ad{ border-radius:6px; overflow:hiden; }

渐变

.gradient {
   background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);
   background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);
   background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);
   background:linear-gradient(top, #FFFFFF, #f8f8f8);
   -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";
   +background:#f9f9f9;
}

阴影

#div { width:100px; height:100px; background；#ffc; border-radius:20px; box-shadow: 10px 20px 5px #cff } //第一个右移，第二个下移，第三个发散，第四个颜色

margin后跟四个参数：top right bottom left 还可简写为两个参数 即为 上下 左右 也可以设置一个参数 这样就代表设置这四个选项了，解释下margin: 0 auto；0为上下外间距为0px auto代表左右自动适应。

text-shadow 属性向文本设置阴影。

h1 {
color:white;
text-shadow:2px 2px 4px #000000;
}

border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：

border-width
border-style
border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

-------------------------------------------------------------------------------------------------------------------------

z-index :-1; 负数图像为低

z-index:2; 正数图像覆盖文字提取出来

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-11;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------

cSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框
<style type="text/css">
a:link, a:visited {
border-style: solid;
border-width: 1px;
border-color: transparent;
}
a:hover {border-color: gray;}
</style>

</head>

<body>

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

0 0