css透明、阴影以及部分选择器和小知识点

* 通配符选择器

• 选择所有的标签

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