请问像这种有凹凸感的背景是怎么做出来的,我网上也找不到这种素材

html-css019

请问像这种有凹凸感的背景是怎么做出来的,我网上也找不到这种素材,第1张

这个是阴影效果,你所看到的立体凹凸感其实就是上面没有阴影,而下面出现阴影(你可以想象一下是不是),这是由css中的box-shadow控制的,例如box-shadow: 10px 10px 5px #888,百度上面讲不清楚,你可以上w3c查找box-shadow属性,那里比较详细

一、打消凹凸机关隔绝距离

DIV之间距离

让两个高低构造DIV块距离为零,通常熟手在行在出产DIV CSS页面的时刻,不会思考到初始化CSS属性,如许各标签属性默许的CSS属性将会形成错位、兼容等题目。

如高下组织的2个box DIV块,中间有一定间距无法消弭

二、肃除DIV间距计划方法

在CSS里配置DIV标签各属性参数为0

div{margin:0border:0padding:0}

这里就设置装备摆设了DIV标签CSS属性相称于初始化了DIV标签CSS属性,这里设置装备摆设margin外边距为0;边框border属性为0与内补白也为0;这样相当于就初始化了DIV盒子之间距各属性隔断为0,何等就不会组成DIV直接有未必的隔绝距离。

只管引荐在制作斥地DIV CSS的时候最佳将网页CSS属性、经常应用网页标签初始化一下。

CSS初始化才能地址://www.css5.com.cn/mokuai/17.shtml

三、配置DIV盒子之间间距

以上是使用CSS革除盒子之间间隔。今后为人人引见设置盒子之间间距。

应用CSS花样单词为margin(可进入CSS margin教程相熟详细应用方式)。

1、设置对象的高下间距

.CSS5-a{margin:10px 0}

配置“CSS5-a”对象高下间距为10px,摆布为0

2、设置对象摆布隔断

.CSS5-b{margin:0 8px}

设置装备摆设“CSS5-b”对象高下间距为0,摆布为8px

3、设置装备摆设DIV盒子与上方相邻间距

.CSS5-c{margin-top:10px}

配置“CSS5-c”对象与上方相邻间距为10px

4、设置DIV盒子与下方相邻隔断

.CSS5-d{margin-bottom:10px}

设置装备摆设“CSS5-d”对象与下方相邻间距为10px

5、设置DIV盒子与左方相邻间距

.CSS5-e{margin-left:9px}

设置“CSS5-e”对象与左侧方相邻间距为9px

6、配置盒子与右方相邻隔断

.CSS5-f{margin-right:12px}

设置“CSS5-f”对象与右方相邻间距为12px

以上咱们为了方便介绍margin设置对象外间距,将对象分别CSS定名为".CSS5-a"至“.CSS5-f”,理论使历时刻加倍需求定名。

其实这不一致的 还是很多的 首先滤镜的应用 火狐是不支持 还有外边距和内边距的默认上也是不一样 字号的默认也不一样 有很多 做的时候 该设的宽度 高度都要设 给通用符*外边距 内边距都设0 滤镜最好不要 给body设置字体 字号 不要在浏览器里成为浏览器的默认字号 等等 做的时候 在几个浏览器上多测试 就行了