CSS3 基础（008_图片）
原始网址：
CSS 图片（CSS Images）
学习使用 CSS 如何样式化图片。
圆角图片（Rounded Images）
使用 border-radius 属性创建圆角图片：
border-radius: 8px;
&!DOCTYPE html&
border-radius: 8px;
&Rounded Images&
&Use the border-radius property to create rounded images:&
src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"&
border-radius: 50%;
&!DOCTYPE html&
border-radius: 50%;
&Rounded Images&
&Use the border-radius property to create circled images:&
src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"&
缩略图（Thumbnail Images）
使用 border 属性创建缩略图。
Thumbnail Image:
border: 1px solid #ddd;
border-radius: 4
padding: 5
&img src="http://www.w3schools.com/css/paris.jpg" alt="Paris"&
&!DOCTYPE html&
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
&Thumbnail Images&
&Use the border property to create thumbnail images:&
src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"&
Thumbnail Image as Link:
display: inline-block;
border: 1px solid #ddd;
border-radius: 4
padding: 5
transition: 0.3s;
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
&a href="http://www.w3schools.com/css/paris.jpg"&
&img src="http://www.w3schools.com/css/paris.jpg" alt="Paris"&
&!DOCTYPE html&
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
&Thumbnail Image as Link&
&Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.&
&Hover over the image and click on it to see the effect.&
target="_blank" href="http://www.w3schools.com/css/paris.jpg"&
src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"&&
响应式图片（Responsive Images）
响应式图片将自动调整以适应屏幕大小。
调整浏览器窗口以查看效果：
&!DOCTYPE html&
max-width: 100%;
height: auto;
&Responsive Images&
&Responsive images will automatically adjust to fit the size of the screen.&
&Resize the browser window to see the effect:&
src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300"&
如果你想让一张图片向下拉伸，但是，拉伸尺寸又不想超过原有大小，可添加以下代码：
max-width: 100%;
height: auto;
提示：请从
阅读更多有关响应式 web 设计的内容。
图片居中（Center an Image）
要让图片在页面内居中，使用 margin:，再使之成为 block 元素：
display: block;
margin: auto;
width: 50%;
&!DOCTYPE html&
display: block;
margin: auto;
src="http://www.w3schools.com/css/paris.jpg" alt="Paris" style="width: 50%"&
图片文本（Image Text）
如何在图片上定位文本：
&!DOCTYPE html&
.container {
position: relative;
.topleft {
position: absolute;
left: 16px;
font-size: 18px;
.topright {
position: absolute;
right: 16px;
font-size: 18px;
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
width: 100%;
height: auto;
opacity: 0.3;
&Image Text&
class="container"&
src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300"&
class="topleft"&Top Left&
class="topright"&Top Right&
class="bottomleft"&Bottom Left&
class="bottomright"&Bottom Right&
class="center"&Centered&
Polaroid Images / Cards
.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
{width: 100%}
.container {
text-align: center;
padding: 10px 20px;
&!DOCTYPE html&
margin: 25px;
.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
.container {
text-align: center;
padding: 10px 20px;
&Responsive Polaroid Images / Cards&
class="polaroid"&
src="http://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="width: 100%"&
class="container"&&The Troll's tongue in Hardanger, Norway&&
class="polaroid"&
src="http://www.w3schools.com/css/lights600x400.jpg" alt="Norway" style="width: 100%"&
class="container"&&Northern Lights in Norway&&
图片过滤（Image Filters）
CSS filter 属性对元素添加视觉效果（如模糊度、饱和度）。
**注意：**IE、Edge 12、Safari 5.1 以及早期版本不支持 filter 属性。
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
&!DOCTYPE html&
width: 33%;
height: auto;
float: left;
max-width: 235px;
-webkit-filter: blur(4px);
filter: blur(4px);
.brightness {
-webkit-filter: brightness(250%);
filter: brightness(250%);
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
-webkit-filter: invert(100%);
filter: invert(100%);
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
&&Note:& The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.&
src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="blur" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="brightness" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="contrast" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="grayscale" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="huerotate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="invert" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="opacity" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="saturate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="sepia" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
class="shadow" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300"&
提示：浏览
以学习更多有关 CSS filters 的内容。
Responsive Image Gallery
CSS 可被用于创建 image galleries 。本例使用 media queries 在不同的屏幕尺寸上重布图片。调整浏览器窗口大小以查看效果：
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
&!DOCTYPE html&
border: 1px solid #ccc;
.img:hover {
border: 1px solid #777;
width: 100%;
height: auto;
padding: 15px;
text-align: center;
box-sizing: border-box;
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
.clearfix:after {
content: "";
display: table;
clear: both;
&Responsive Image Gallery&
&Resize the browser window to see the effect.&
class="responsive"&
class="img"&
target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"&
src="http://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"&
class="desc"&Add a description of the image here&
class="responsive"&
class="img"&
target="_blank" href="http://www.w3schools.com/css/img_forest.jpg"&
src="http://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"&&
class="desc"&Add a description of the image here&
class="responsive"&
class="img"&
target="_blank" href="http://www.w3schools.com/css/img_lights.jpg"&
src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"&&
class="desc"&Add a description of the image here&
class="responsive"&
class="img"&
target="_blank" href="http://www.w3schools.com/css/img_mountains.jpg"&
src="http://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"&&
class="desc"&Add a description of the image here&
class="clearfix"&&
style="padding: 6"&
This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will
show four images side by side, for screens smaller than 700px, it
will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).
&You will learn more about media queries and responsive web design later in our CSS Tutorial.&
可阅读更多有关响应式 web 设计的内容。
Image Modal (Advanced)
本例将演示 CSS 和 JavaScript 如何一起工作。
首先，使用 CSS 创建模态框（对话框），默认隐藏。
然后，当用户点击图片的时候，使用 JavaScript 显示模态框并且呈现模态框内的图片：
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.
captionText.innerHTML = this.
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
&!DOCTYPE html&
charset="utf-8"&
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
#myImg:hover {opacity: 0.7;}
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
@-webkit-keyframes zoom {
{-webkit-transform: scale(0)}
{-webkit-transform: scale(1)}
@keyframes zoom {
{transform: scale(0.1)}
{transform: scale(1)}
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
&Image Modal&
&In this example, we use CSS to create a modal (dialog box) that is hidden by default.&
We use JavaScript to trigger the modal and to display the
current image inside the modal when it is clicked on. Also note that
we use the value from the image's "alt" attribute as an image caption text inside the modal.
Don't worry if you do not understand the code right away. When
you are done with CSS, go to our JavaScript Tutorial to learn more.
id="myImg" src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200"&
id="myModal" class="modal"&
class="close"&×&
class="modal-content" id="img01"&
id="caption"&&
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.
captionText.innerHTML = this.
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！谁帮我看下，我这个margin为什么不生效啊
1.我的图片之间margin不会生效。2.高度80%怎么从上面开始的。body{font-family: Arialfont-size；20}body,ul{margin: 0;
padding: 0
list-style:} /*外边框0，内边框0，清楚列表样式*/.wrap{width:70%;height: 200margin:50background: #fff}
/*wrap这个盒子宽占浏览器的70%，高200像素，外边距上下50像素，左右剧中*/.wrap h1{ font-size: 20 text-align: line-height: 200}.effect{position: box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1)/*ie内核0px 0px 10px rgba(255,0,0,0.1)h-shadow,v-shadow设置为0时，上下边都会出现阴影，左右边也都会出现阴影而不是单边。*/-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1) /*chramo内核*/-o-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1)-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1)}.effect:before,.effect:after{ content:''; background: #f00; position: z-index:-1; top:50%;/*必须设置四个方向值，才能显示before这个盒子*/ bottom: 0 right:10 left:10 /*在effect盒子内容的前面插入一个内容"hello"*/box-shadow: 0 0 20px rgba(0,0,0,0.3);-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);-o-box-shadow: 0 0 20px rgba(0,0,0,0.3);-moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);border-radius: 100px/10 /*变成曲线，注意100px/10px(水平方向的半径是100，垂直方向的半径是10)与100px 10px（左上、右下下弧度半径是100，右上、左下半径是10px）的区别*/}.box{width:980height:clear:overflow:margin: 20}.box li{
list-style-type:
margin: :20px 10 width: 300 height: 210 border: 2px solid # position: float:box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1)-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1)-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1)-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1)}.box li img{width: 290height: 200margin: 5}.box li:before{ content: '';
width:90%;
height:80%;
background: #f00;
-ms-transform:skew(-12deg) rotate(-4deg);
-webkit-transform:skew(-12deg) rotate(-4deg);
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform:skew(-12deg) rotate(-4deg);box-shadow: 0 1px 4px rgba(0,0,0,0.3);-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);-o-box-shadow: 0 1px 4px rgba(0,0,0,0.3);-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);}.box li:after{ content: '';
width:90%;
height:80%;
background: #f00;
-ms-transform:skew(12deg) rotate(4deg);
-webkit-transform:skew(12deg) rotate(4deg);
-moz-transform:skew(12deg) rotate(4deg);
-o-transform:skew(12deg) rotate(4deg);box-shadow: 0 1px 4px rgba(0,0,0,0.3);-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);-o-box-shadow: 0 1px 4px rgba(0,0,0,0.3);-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);}
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11　　一般我用到box-shadow都是用于诸如按钮，文本块，某些图标，css类似为:
box-shadow: 1px 1px 5px rgba(0, 0, 0, .8);
　　这样，样式看上去会更加柔和，或者增加了立体感。
　　我个人的理解上，box-shadow的本质就是本体的形状的复制。
　　因此，当我们要给样式增加立体感的时候，就可以做的更加逼真。
HTML： &div class="box shadow"&&/div&
&&　　 &.box {& 　　　　 width: 300& 　　　 & height: 100
　　　　　　background: #
　　　　　　border-radius: 10
　　　　　　
　　　　　　margin: 10　　　　
　　　　}　　
　　　　.shadow1::before,　　　　.shadow1::after {
　　　　　　content:"";
　　　　　　position:
　　　　　　z-index:-1;
　　　　　　bottom:15
　　　　　　left:10
　　　　　　width:50%;
　　　　　　height:20%;
　　　　　　box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
　　　　　　transform:rotate(-3deg);　　　　}
　　　　.shadow1::after{
　　　　　　right:10
　　　　　　left:
　　　　　　transform:rotate(3deg); 　　　　}
　　　以上代码效果如下：
　　　一个非常普通的长方形块元素。
　　利用一个更小的长方形伪类，加上box-sizing复制本体形状的特性，模拟出了纸张的立体感。
　　同时，box-shadow是可以叠加的，类似box-sizing: 0 0 5px rgba(0, 0, 0, .8), 1px 1px 5px&rgba(0, 0, 0, .8)，写在前面的属性会在最上面。
　　所以我们写出以下的效果：
CSS：.shadow {
　　position:
　　top: 50%;
　　left: 50%;
　　margin-top: -150
　　margin-left: -150
　　width: 300
　　height: 300
　　box-shadow: 10px 0 5px rgba(228, 28, 28, 0.8), 0 10px 5px rgba(60, 90, 202, 0.8), -10px 0 5px rgba(81, 247, 86, 0.8), 0 -10px 5px rgba(193, 102, 178, 0.8), 10px 10px 5px rgba(81, 247, 86, 0.8);
　　同是，由于我们写的阴影的颜色是带透明度的，因此颜色会中和，我想利用阴影的叠加特性可以做出非常美的效果。
　　box-shadow既然是一个本体的复制，也就是说我们可以用box-shadow来做出一些图标，用样式写出来的图标我想应该是会比图片加载快，并且是直接和页面一起渲染出来的，就像上面的一个三角图标，就是利用box-shadow写出来的。
HTML：&i class="icon-tri"&&/i&
CSS： .icon-tri {
display: inline-
margin-top: 30
border-left: 2px solid #
background-color: #
box-shadow: -1px 1px #ddd, 1px 1px #ddd,
　　-2px 2px #ddd, 2px 2px #ddd,
　　-3px 3px #ddd, 3px 3px #ddd,
　　-4px 4px #ddd, 4px 4px #ddd,
　　-5px 5px #ddd, 5px 5px #ddd
　　我个人认为，box-shadow应该是可以模拟出左右的图片，图标等。
　　PS：我看到过有些插件可以做到让你上传一张图片，然后在一个60*60的格子上复现这个图片上60*60px的一块，我想每个px就可以是一个box-shadow，图片的像素可以用canvas的getImageData读取出来，遍历像素的颜色信息，应该这样就可以实现，
　　下2周准备琢磨琢磨这个。
阅读(...) 评论()css3 box-shadow_百度知道
css3 box-shadow
box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 3...
我有更好的答案
box-shadow属性至多有6个参数设置，他们分别取值：阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数
box-shadow并不能单独设置哪一边的阴影属性，这6个属性是叠加显示的，用以控制阴影展示样式的精细程度，其中带有inset属性的简写样式是内阴影这个样式展现写的很棒，应该是对设计有很深的执念才会这么写吧
本回答被提问者采纳
4个值，水平距离，垂直距离，阴影大小，阴影颜色
为您推荐：
其他类似问题
您可能关注的内容
css3的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS3 Box Shadow on Top, Left, and Right Only - Stack Overflow
to customize your list.
This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our , , and our .
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
Greetings,
I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
What would be the best way to accomplish this?
This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the
to see what I'm talking about, easier than adding all of the HTML and CSS here.
Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:
-webkit-box-shadow: 0px -4px 7px #e6e6e6;
-moz-box-shadow: 0px -4px 7px #e6e6e6;
box-shadow: 0px -4px 7px #e6e6e6;
This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!
3,2451969108
It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.
#servicesContainer {
/*your css*/
and it's fixed! like magic!
51.7k20123146
use the spread value...
box-shadow has the following values
box-shadow: x
so you could use something like..
box-shadow: 0px -10px 10px -10
UPDATE: i'm adding a
6,59924243
You can give multiple values to box-shadow property
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to left and right only, you can adapt it to your requirements
4,453114361
I found a way to cover the shadow with ":after", here is my code:
#div:after {
content:"";
background:#
The following code did it for me to make a shadow inset of the right side:
-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;
Hope it will help!!!!
Adding a separate answer because it is radically different.
You could use rgba and set the alpha channel low (to get transparency) to make your drop shadow less noticeable.
Try something like this (play with the .5)
-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
Hope this helps!
I was having the same issue and was searching for a possible idea to solve this.
I had some CSS already in place for my tabs and this is what worked for me:
(Note specifically the padding-bottom: 2 inside #tabs #selected a {. That hides the bottom box-shadow neatly and worked great for me with the following CSS.)
margin-top: 1
margin-left: 0.5
#tabs li a {
padding: 1 1
background: #FFFFFF;
#tabs #selected {
/* For the "selected" tab */
box-shadow: 0 0 3px #666666;
background: #FFFFFF;
#tabs #selected a {
background: #FFFFFF;
padding-bottom: 2
#tabs ul {
list-style:
padding: 0;
margin: 0;
#tabs li {
border-bottom-width: 0;
margin: 0 0.5em 0 0;
border-top-left-radius: 3
border-top-right-radius: 3
Thought I'd put this out there as another possible solution for anyone perusing SO for this.
I know this is very old, but none of these answers helped me, so I'm adding my answer.
This, like @yichengliu's answer, uses the Pseudo ::after element.
#div::after {
content: '';
height: 100%;
z-index: -1;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
.filter.right::after {
content: '';
height: 100%;
background:
z-index: -1;
-webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
If you decide to change the X of the drop shadow (first pixel measurement of the drop-shadow or box-shadow), changing the width will help so it doesn't look like there is a white gap between the div and the shadow.
If you decide to change the Y of the drop shadow (second pixel measurement of the drop-shadow or box-shadow), changing the height will help for the same reason as above.
#div:before {
content:"";
width:100%;
background:#
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
Post Your Answer
By clicking &Post Your Answer&, you acknowledge that you have read our updated ,
and , and that your continued use of the website is subject to these policies.
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled