AI智能
改变未来

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);}
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css透明、阴影以及部分选择器和小知识点