html - 需要帮助来影响标题和按钮

Question

我正在尝试对模型的页眉产生一定的影响。它有几乎不引人注意的白光。你会在这张图片中看到它，我在标题和副标题后面提供。我怎样才能用CSS获得发光效果？我确实有一个包含整个标题的标题，但是为整个标题使用图像是个好主意吗？我也想要靠近字幕的那两行。是否可以对这些行进行编码？最后，“立即订购”按钮，是否可以使用 css 制作，或者我应该只使用它的图像并链接它？

模型

jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [我现在拥有的]

    <header>
    <h1>Taffies Cupcakes</h1>
    <h2>Fresh and tasty</h2>
</header>



body{
    background-color:#e7d2c9;
}

header h1{
    font-family:georgia;
    font-size:46px;
    color:#784f3d;
    text-align:center;
    margin-top:50px;
}

header h2{
    font-family:segoe script;
    font-size:32px;
    color:#846a5f;
    text-align:center;
}

Answer 1

所有这些都可以在 CSS 3 中完成，但我不推荐这样做。如果您希望按钮和标题在所有浏览器中看起来都一样，那么使用图像是最好的主意。如果你想在 CSS 中这样做，试试这个:

HTML:

<header>
    <div class="shadow"></div>
    <h1>Taffies Cupcakes</h1>
    <h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>

CSS:

header > .shadow {
    width: 0px;
    height: 0px;
    margin: 0px 50%;
    box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
    height: 1px;
    width: 100px;
    margin: 5px 20px;
    background-color: #846a5f;
    display: inline-block;
    vertical-align: middle;
}

正如其他答案所提到的，radial-gradient 可能是去这里的方式。只需将它应用于 header 元素，而不是将我的版本与 box-shadow 一起使用(这对某些人来说可能有点老套)。

按钮更新:

HTML:

<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>

CSS:

button.special {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
    background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
    background-color:#784f3d;
    color: #e7d2c9;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 5px;
    height: 42px;
}
button.special > .icon {
    width: 27px;
    height: 27px;
    /*background-image: url('triangle-button.png')*/
    position: absolute;
    margin: 5px;
}
button.special > .headline {
    margin-left: 42px;
    font-size: 18px;
}
button.special > .description {
    margin-left: 42px;
    font-size: 12px;
}

http://jsfiddle.net/ezdr3xdg/17/