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

本文地址：https://blog.csdn.net/weixin_43913003/article/details/107390828