CSS Box Shadow Bottom Only [复制]

本文翻译自：CSS Box Shadow Bottom Only [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

drop shadow only bottom css3 13 answers drop shadow only bottom css3 13 answers

How can I do this? 我怎样才能做到这一点？ I want my element to look as though it has a shadow underline. 我希望我的元素看起来好像有一个阴影下划线。 I don't want the shadow for the other 3 sides. 我不希望其他三方的阴影。

#1楼

参考：https://stackoom.com/question/J8Y5/CSS-Box-Shadow-Bottom-Only-复制

#2楼

try this to get the box-shadow under your full control. 尝试这样可以完全控制盒子阴影。

    <html><head><style> div {width:300px;height:100px;background-color:yellow;box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;}</style></head><body><div></div></body></html>

this would apply to outer box-shadow as well. 这也适用于外框阴影。

#3楼

You can use two elements, one inside the other, and give the outer one overflow: hidden and a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are "cut off" 您可以使用两个元素，一个在另一个内部，并给外部一个overflow: hidden和宽度等于内部元素以及底部填充，以便所有其他边上的阴影被“切断”

#outer {width: 100px;overflow: hidden;padding-bottom: 10px;
}#outer > div {width: 100px;height: 100px;background: orange;-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Alternatively, float the outer element to cause it to shrink to the size of the inner element. 或者，浮动外部元素以使其缩小到内部元素的大小。 See: http://jsfiddle.net/QJPd5/1/ 请参阅： http ： //jsfiddle.net/QJPd5/1/

#4楼

Do this: 做这个：

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it. 它实际上要简单得多，无论你将模糊设置为（第三个值），将传播（第四个值）设置为负值。

#5楼

Try this 试试这个

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

You can see it in http://jsfiddle.net/wJ7qp/ 你可以在http://jsfiddle.net/wJ7qp/看到它

CSS Box Shadow Bottom Only [复制]相关推荐

css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用页面如下: 代码: <!DOCTYPE html> <html><head><script ...
洛阳郊区1980年地图_在无聊的郊区居住中解释CSS Box模型
洛阳郊区1980年地图 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 如果您去过一个普通的郊区社区,那么您可以了解CSS Box Model. (If you ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
css里slidebottom,jquery - 从CSS“top”到“bottom”的jQuery动画 - 堆栈内存溢出
编辑:不得不快速离开,所以没有完成,我决定使用jquery ui作为例子(你需要核心): #line_three { width:100%; } .line3_top { position:absol ...
css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...

CSS Box Shadow Bottom Only [复制]

#1楼

#2楼

#3楼

#4楼

#5楼

CSS Box Shadow Bottom Only [复制]相关推荐

最新文章

热门文章