页面元素的边框是我们常见的属性,无非就是一些线条的节制用来区分区域,可是跟着慢慢的进修,小编发现本身仍是太年青了...,一个简单可是灿艳区域朋分就是可以经由过程边框暗影结果来实现的;

工具/原料
- 电脑
- Sublime text 2
方式/步骤
- 1
首先我们先写一个简单的静态页面,里面就放置一个 div , 之后用来演示,如何节制 div 的边框暗影,达到灿艳的结果;
- 2
首先,我们先把 div 的样式节制一下;
width ,height 节制 宽和高;
margin 节制外边距,趁便将 div 放置到页面中心;
border,让没有内容的 div 闪现;
- 3
如图一,我们可以看到边框的边角是圆弧的,这里的样式也是由别的的属性节制的;
border——radius:;
- 4
然后我们先简单的节制一边的暗影结果,暗影颜色设为黄色;
box-shadow:;
这个属性就是节制暗影的,它的值有良多,我就不复述了,有乐趣的可以去查阅资料;
- 5
然后我们节制四边的暗影,达到最终的结果;
代码如图,
从上到下,别离节制边框的 ‘ 上 右 下 左‘,每一边设置完后我们要用 逗号 离隔,最后再用分号结从头至尾;
(其实暗影节制可以达到很是厉害的结果,具体的常识点大师可以查查资料;这个属性的常识点真的是太多了......)
注重事项
- 仅作事例分享;