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
上一篇: 又不认识他们