html - 如何在 css 上用阴影做这样的渐变 block ?

标签 html css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 9 年前

这是关于 image 的链接

color: rgb(81, 134, 172);
display: inline-block;
text-decoration: none;
outline: none;
vertical-align: super;
border-top: 2px solid rgb(81, 134, 172);
border-bottom: 2px solid rgb(81, 134, 172);
padding-top: 15px;
padding-bottom: 15px;
-webkit-box-shadow: inset 0px 0px 11px 3px rgb(86, 141, 180);

在 css 上可以吗?

最佳答案

DEMO

HTML

<div class="box">
    <h3>User Options</h3>
</div>

CSS

.box:after {
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}


.box:before {
    border-radius: 50%;
    top: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.box {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto 80px;
    max-width: 440px;
    padding: 20px 0 20px;
    position: relative;
    text-align: center;
}

Original Demo

关于html - 如何在 css 上用阴影做这样的渐变 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23007743/

上一篇:javascript - HTML Popup Div 到任何屏幕分辨率的屏幕中心

下一篇:css - 使用 BEM 和 SMACSS 的站点模块与库模块

相关文章:

html - 无法使用 Bootstrap 在页面上放置表格列

php - 由于下拉脚本,动态下拉列表不起作用

html - 使用媒体查询的响应式页脚

html - 在 Internet Explorer 中调整字体大小

css - 任何熟悉移动可见性和 zurbs 基础的人

css - 当向 div 添加 1 px 边框时,Div 大小增加,不想那样做

javascript - 使 div 仅与父级一样长

javascript - 有漏洞的高效 HTML Div

c# - 在不触及注册表的情况下将页眉和页脚信息添加到 WebBrowser 的打印输出

css - Font Awesome 5 - 为什么不显示比特币、facebook、twitter 等图标?