Question

我们有一个新项目，我公司雇用了一名设计师。他设计中的分割使用了像图像一样的底部边框，我只能使用线性渐变来重建暗线，但我担心的是其中心的白色发光。预先感谢

已编辑这是我当前下面边框的代码（没有发光部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .custom-border {
            position: relative;
        }
    
        .custom-border::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            content: '';
            background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4));
        }
    
    
    </style>
</head>

<body>
    <div class="custom-border " style="height: 300px; width: 300px; background-color: #0E1C6F;">

    </div>
</body>
</html>

Answer 1

这很容易做到。我使用了您的示例并对其进行了修改，以获取所需的内容。

通过调整位置，大小和展开将其移动到您喜欢的位置，将插入框阴影用于深色渐变。请参见box shadow分类元素的custom-border属性：前两个值是水平和垂直的位置，第三个值是大小和第四个是阴影的扩散。第五个元素是颜色。主要思想是，点差应与大小相同，但应在负数范围内。此位置和垂直位置的负偏移使您的“单侧”阴影变暗。

然后，通过添加带有椭圆形的径向渐变背景并将背景大小高度加倍，可以使用:after伪元素创建“光泽”。这样我们得到一个半椭圆形。

我没有正确的颜色和尺寸，但是您可以修改它们以使其正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #0E1C6F;
        }
        .custom-border {
            position: relative;
            /* shifted box shadow (only bottom part visible) */
            box-shadow: inset 0 -15px 10px -10px #000;
            height: 50px; 
            width: 100%; 
            background-color: #0E1C6F;
        }
    
        .custom-border::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 15px;
            content: '';
            /* a border line to have that subtle black line */
            border-bottom: 1px solid #000;
            background-image: radial-gradient(ellipse, rgba(0,37,255,1) 0%, rgba(0,37,255,.1) 50%, rgba(255,255,255,0) 70%);
            /*resize the background image to be double height, this crops the lower half of the ellipse and makes it look like a light shine from behind*/
            background-size: 100% 200%;
        }
    </style>
</head>

<body>
    <div class="custom-border">

    </div>
</body>
</html>

Answer 2

您需要使用background: linear-gradient

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background: linear-gradient(to left, #333, #333 20%, #eee 25%, #333 20%);
}
</style>
</head>
<body>

<h1>Linear Gradient</h1>
<p></p>

<div id="grad1"></div>


</body>
</html>

我如何创建这样的CSS边框？

2 个答案: