最近在设计网页的过程中遇到需要给输入框、图片框添加显示效果,最终觉得选择用CSS3样式比较容易实现这一效果。
现在分享一下心得,以contentBox元素为例。

在CSS样式表中添加下列样式,鼠标移至边框上便会实现发光效果。

.li:hover{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(255,0,0,0.5);
box-shadow:0 0 15px rgba(255,0,0,0.5);
-moz-box-shadow:0 0 15px rgba(255,0,0,0.5);
-webkit-box-shadow:0 0 15px rgba(255,0,0,0.5);
}

对于发光样式并非一成不变的,该怎么修改呢?这就涉及到box-shadow属性,box-shadow的属性至多有6个参数需要设置,其中两个为必须设置的。

语法顺序:box-shadow:inset x-shadow y-shadow blur spread color
对象选择器{box-shadow:投影方式 水平偏移量 垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

inset为可选参数,将外部阴影 (outset) 改为内部阴影;
x-shadow为必设参数,控制水平阴影的位置,允许负值。如果参数值为正时,则阴影在对象的右边,反之为负值时,阴影在对象的左边;
y-shadow为必设参数,控制垂直阴影的位置,允许负值。如果参数值为正时,则阴影在对象的下边,反之为负值时,阴影在对象的上边;
blur为可选参数,控制模糊距离。其值只能为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
spread为可选参数,控制阴影的尺寸,允许负值。如果参数为正值,则整个阴影将会扩大,反之为负值时,则会缩小;
color为可选参数,控制阴影的颜色。

以下将展出四种效果,仅供参考,更多样式按需搭配便是。
box-shadow

1、单边效果

box-shadow: -2px 0 0 purple, //左阴影
0 -2px 0 brown, //上阴影
0 2px 0 yellow, //下阴影
2px 0 0 red; //右阴影

2、单边+阴影

box-shadow: -2px 0 5px purple,0 -2px 5px brown,0 2px 5px yellow,2px 0 5px red;

3、仅设置阴影扩展半径+阴影颜色

box-shadow: 0 0 0 1px blue;

4、仅设置阴影模糊半径+阴影颜色

box-shadow:0 0 15px rgba(255,0,0,0.5);

 
目前共有1条评论
你目前的身份是游客,评论请输入昵称和电邮!

  1. 收藏。
    tcdw 2014.12.8 15:25 @
  • 暂无Trackback