boxshadow内部阴影(boxshadow底部阴影)
css box-shadow 只要左侧有内阴影怎么办?
box-shadow:x y z color; 内阴影是color 后 空格+inset就可以 只要左侧嘛不知道。。
内部阴影怎么设置
使用text-shadow属性来设置内部阴影,该属性在CSS中定义,其语法如下:
text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置;
v-shadow:垂直阴影的位置;
blur:模糊距离;
color:阴影的颜色。
拓展:如果要添加多个内部阴影,可以使用逗号分隔,如 text-shadow: 10px 5px 1px #000, -10px -5px 1px #fff;。此外,还可以使用box-shadow属性来为元素添加多个内部阴影,其语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影的位置;
v-shadow:垂直阴影的位置;
blur:模糊距离;
spread:阴影的大小;
color:阴影的颜色;
inset:内部阴影,设置为inset即可。
CSS3属性box-shadow的使用
最近写一个四周加阴影的项目用到了box-shadow属性,感觉项目里面好多地方都会用到这个属性,于是就专门整理了一下。
语法:
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
为了更清楚的了解box-shadow,做几个demo来给大家演示一下效果:
h-shadow代表的是阴影的水平位置偏移量,可以是正负值
即在x轴的阴影位置,正值阴影出现在右边,负值阴影出现在左边
v-shadow代表垂直阴影位置,即在y轴的阴影位置,可以是正负值
当v-shadow的正值时阴影出现在下面,当v-shadow的负值时阴影出现在上面
blur阴影的模糊距离,这使得阴影部分的过渡看起来更加柔和
spread代表阴影的大小,也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问,其实blur是用于描述模糊半径,它的取值决定了阴影的模糊程度;而spread表示阴影所占区域的大小。
color阴影的颜色值,可以用任何颜色单位的来表示。当我们没有设置颜色值,默认是黑色
默认情况下,设置的阴影都是外部阴影,inset的作用是将外部阴影转换成内部阴影
附:
属性定义及使用说明:
box-shadow属性可以设置一个或多个下拉阴影的框。
兼容性:
box-shadow属性四个值是什么?
1、offset-x
第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。
3、blur
第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。
4、spread
第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。
box-shadow的作用:
box-shadow是css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。通过对box-shadow使用的理解,想要一个div的四周都有阴影的话,可通过box-shadow的四周阴影叠加来实现。
box-Shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
CSS3-盒子阴影:box-shadow
box-shadow:none|shadow
它的值包括?6?个参数:阴影类型,X轴位移,Y轴位移,阴影大小,阴影扩展和阴影颜色。此?6?个参数可以有选择地省略。
浏览器兼容性
Webkit支持:-webkit-box-shadow
Mozilla支持:-moz-box-shadow
IE9支持:box-shadow
IE8及以前:不支持
实用实例
简单效果:
img{
height:300px;
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
虚阴影效果:
img{
height:300px;
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
渐变阴影效果:
img{
height:300px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
带光晕效果
img{
height:300px;
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
内阴影效果
img{
height:300px;
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
彩色阴影
img{
height:300px;
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}