* 通配符选择器
-
选择所有的标签
*{margin:0px;padding:0px;}
以上的代码就是去掉所有标签的内边距padding和外边距margin
标签选择器
-
以标签名作为选择器的名字
div{css样式...属性:属性值;...}
去掉小圆点
ul{list-style:none;}
阴影
-
盒子阴影 box-shadow
box-shadow:x y blur spread color [inset];
示例
.box{ width:200px; height: 200px; border: solid 1px #ccc; margin: 100px auto; box-shadow: 0px 0px 0px 0px red;}
-
box-shadow的值可以有多个,且每个值之间用逗号隔开
box-shadow:x y blur spread color [inset],x y blur spread color [inset];
示例:
.box{ width:200px; height: 200px; border: solid 1px #ccc; margin: 100px auto; box-shadow: 0px 0px 0px 0px red, 0px 0px 0px 0px blue, 0px 0px 0px 0px green, 0px 0px 0px 0px yellow;}
-
文字阴影 text-shadow
text-shadow:x y blur color;
示例
.box{ ... text-shadow: 0px 0px 0px green; ...}
-
text-shadow的值可以有多个,且每个值之间用逗号隔开
.box{ text-shadow: 1px 0px 0px #000, -1px 0px 0px #fff;}
透明
-
opacity 背景透明内容也透明
.box{ width:200px; height: 200px; background: #000; margin: 100px auto; color: #fff; font-size: 32px; text-align: center; line-height: 200px; /* opacity:0-1; 0 全透明 1不透明 透明背景颜色和内容 */ opacity: 0.1;}
-
rgba() 背景透明,内容不透明
.rgb{ width:200px; height: 200px; margin: auto; color: #fff; font-size: 32px; text-align: center; line-height: 200px; /* rgba(r,g,b,a) r: red 0-255 g: green 0-255 b: blue 0-255 a: 透明度 0-1 0,0,0 黑色 255,255,255 白色 255,0,0 红色 0,255,0 绿色 0,0,255 蓝色 颜色单词:red,blue,green 16进制:# rgb(0-255) 只透明背景,不透明内容 */ background: rgba(0,0,0,.1);}