欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 12:16:30
* 通配符选择器选择所有的标签*{ margin:0px; padding:0px;}以上的代码就是去掉所有标签的内边距padding和外边距margin标签选择器以标签名作为选择器的名字div{ css样式... 属性:属性值; ...}去掉小圆点ul{ list-style:none;}阴影盒子阴影 box-shadowbox-shadow:x y blur spread colo...

* 通配符选择器

  • 选择所有的标签

*{
    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