例子都只取一个,其他的css样式都是类同的
多类选择器例子:
网上看见一个荧光效果,觉得蛮好看就扒过来分析了一下 https://www.jianshu.com/p/c501fee6fb68
荧光效果主要是:before和:after伪元素起的作用,先将其注释起来,看下原本的效果:
可以看见并没有荧光效果。
这个是给2个伪元素添加一个线性渲染的背景
有了上面蒙层的介绍,这个效果就是整体向外拉伸了2px。 z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:
和before一样,就是多了个高斯模糊,注释了黑色背景来看下.box:after的效果:
所以将3层叠加起来就有了荧光和边框效果。
background-color 背景颜色background-repeat 重复背景图像
background-position 背景图像位置
background-size 背景图像大小
background-origin 背景图像的定位区域
background-image 渐变
写css背景图片代码可以参考以下:
<html>
<head>
<styletype="text/css">
body{background-image:url(abc.jpg)}
</style>
</head>
<body>
</body>
</html>
扩展资料:
1、背景图片语法:{background-image:url(url)|none}
2、背景固定语法:{background-attachment:fixed|scroll}
3、背景重复语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4、背景定位语法:{background-position:数值|top|bottom|left|right|center}
参考资料来源:百度百科-CSS语法