重新设计旧设计，用新的CSS3规则替换背景图像

Question

我必须重新设计一个3年历史的网站，在使用广泛的CSS3技术升级编码技术的同时，保持相同的外观和感觉，使其具有现代化和响应性。

这是一种使用透明度，浮雕和切割区域的设计，最初在Photoshop中创建，然后使用从原始图片切割的背景图块图像进行编码。

这里显示了一个合成要解决的挑战的细节：

这里是关键主题：

1. 标题具有半透明背景，显示正文的背景，但也有从左到右的水平渐变的3D外观边框。
2. 标题的背景（及其边框）也有左上角和右下角的光线和阴影浮雕外观。
3. 徽标和网站名称位于切割区域的标题背景上。

在这里，我的实际WIP只用CSS3重新创建：



如您所见，仍然缺失，浮雕效果，边框渐变，最重要的是..... 徽标切割区域（目前我只是放在原始布局拍摄的图像上）。

你能帮助我得到最原始的结果吗？

谢谢。

Answer 1

您可以使用SVG路径创建形状：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="110" width="600" viewBox="4 4 92 16">
    <path d="M 5 6 a 1 1 0 0 1 1 -1 h 14 a 4.2 4.2 0 0 0 8 0 h1 a 1 1 0 0 0 1 1 h 49 a 1 1 0 0 0 1 -1 h14 a 1 1 0 0 1 1 1 v 10 a 1 1 0 0 1 -1 1 h -88 a 1 1 0 0 1 -1 -1z" fill="none" stroke="black" stroke-width="0.6" />
</svg>

对于这个基本形状，您可以填充渐变，照片等。

Answer 2

对于浮雕，您可以使用插入box shadow或具有linear gradient值的背景。

对于渐变边框，您可以使用border-image属性linear gradient。

对于＆＃34;徽标切割区域＆＃34;一个想法是使用具有边界半径和匹配渐变背景的定位父div。