Html 需要帮助获得标题和按钮的效果吗

我试图在模型的标题上获得某种效果。它有几乎不明显的白光。你会在我在标题和副标题后面提供的图片中看到它。如何使用css获得发光效果？我确实有一个标题和整个东西，但这是一个好主意，使用图像为整个标题？我还想把这两行放在字幕旁边。有可能对这些行进行编码吗？最后，按钮“立即订购”，这是可以用css制作的，还是我应该使用它的图像并链接它

模型

JSFIDLE-[我目前拥有的]

    <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;
}

塔菲纸杯蛋糕
鲜美
身体{
背景色：#e7d2c9；
}
收割台h1{
字体系列：格鲁吉亚；
字体大小：46px；
颜色：#784f3d；
文本对齐：居中；
边缘顶部：50px；
}
收割台h2{
字体系列：segoe脚本；
字体大小：32px；
颜色：846a5f；
文本对齐：居中；
}

使用

---

所有这些都可以在CSS 3中实现，但我不推荐这样做。如果希望按钮和标题在所有浏览器中看起来都一样，那么最好使用图像作为按钮和标题。如果要在CSS中执行此操作，请尝试以下操作：

HTML:

正如其他答案所提到的，

径向梯度

可能是解决这个问题的方法。只需将其应用于

标题

元素，而不是使用我的带有方框阴影的版本（这对某些人来说可能有点不正常）

更新按钮：

HTML:

---

我已经用各种各样的起始模板更新了您的JSFIDLE。它的CSS#渐变和边界半径

按钮：

<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>

背景：

body{
    background:linear-gradient(to right, red, blue, red);
}

---

这应该足够让你开始了。

按照问题的顺序：使用CSS渐变/yes/yes/使用图像作为img src或背景。现在你有足够的时间来学习并向我们展示你是如何做到这一点的。在这种情况下，我将使用图像，因为我确实希望它看起来一样。我在Photoshop中剪切了页眉，但我是否也应该包括背景，因为整个页面的背景都是相同的颜色？如果页面的颜色不相似怎么办？这并不重要，不创建透明背景图像的唯一原因是如果你想支持IE 6这样的古老浏览器。使用CSS

background

或

background color

属性设置背景上方的透明图像。

body {
    height: 100vh;
    background-color: #e7d2c9;
    position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
   z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}

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

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;
}

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

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;
}

<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>

#order_now{
    background: linear-gradient(#846a5f, brown);
    width: 200px;
    border-radius: 5px;
    padding: 5px;
    color: white;
    font-size: 12pt;
    font-weight: bold;
}
#sub_order{
    font-size: 10pt;
    font-style: italic;
}

#triangle-right { 
width: 0; 
height: 0; 
border-top: 25px solid transparent; 
border-left: 50px solid white; 
border-bottom: 25px solid transparent;
display: inline-block;
}

#text{
    display: inline-block;
}

body{
    background:linear-gradient(to right, red, blue, red);
}