如何柔化 CSS 上的溢出边缘
How to soften overflown edges on CSS
当我向下滚动时子 div 溢出时,我试图柔化橙色 div 的那些锐利边缘。我可以用 CSS 来做吗?对不起,如果我的解释令人困惑。
screenshot
我给你举了个例子,你可以将 box-shadow
添加到页眉和页脚,这样你就可以在元素之间创建模糊效果。
body{
background-color: #888888;
}
header{
width: 100%;
height: 50px;
box-shadow: 0 10px 8px 10px #888888;
background-color: #888888;
/* this is important so the box-shadow is displayd on top of the next element */
position: relative;
z-index: 1
}
div{
width: 100%;
height: 100px;
background-color: red;
}
<body>
<header></header>
<div> </div>
</body>
当我向下滚动时子 div 溢出时,我试图柔化橙色 div 的那些锐利边缘。我可以用 CSS 来做吗?对不起,如果我的解释令人困惑。
screenshot
我给你举了个例子,你可以将 box-shadow
添加到页眉和页脚,这样你就可以在元素之间创建模糊效果。
body{
background-color: #888888;
}
header{
width: 100%;
height: 50px;
box-shadow: 0 10px 8px 10px #888888;
background-color: #888888;
/* this is important so the box-shadow is displayd on top of the next element */
position: relative;
z-index: 1
}
div{
width: 100%;
height: 100px;
background-color: red;
}
<body>
<header></header>
<div> </div>
</body>