html - 将 CSS 属性应用于 HTML 代码以实现图像的边框和虚线-6ren

html - 将 CSS 属性应用于 HTML 代码以实现图像的边框和虚线

转载作者：太空宇宙更新时间：2023-11-04 07:57:50

我有一个 PDF 文档，我想通过 HTML 重新创建它。该文档是日期和事件或每个季节的列表。我不确定在哪里应用边框属性来创建左边框的内部渐变和框内的边框半径。

这是我正在尝试重新创建的 PDF 的图像。

我已经通过下面的代码成功地实现了其中的大部分。

body {
            width: 1200px;
            font-size: .9335rem
        }
        
        h1 {
            width: 95%;
            margin: .8rem auto;
            overflow: hidden;
            text-align: center;
            color: #0A3782;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 0px 7px 14px #000000;
        }
        
        h1::before,
        h1::after {
            content: "";
            display: inline-block;
            width: 70%;
            margin: 0 .5em 0 -55%;
            vertical-align: middle;
            border-bottom: 1px solid #000000;
        }
        
        h1:after {
            margin: 0 -55% 0 .5em;
        }
        
        .ml-250 {
            width: 970px;
            margin: 10px 0px 10px 250px;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 30px 30px 30px 30px;
            -moz-border-radius: 30px 30px 30px 30px;
            -webkit-border-radius: 30px 30px 30px 30px;
        }
        
        .ml-125 {
            width: 970px;
            margin: 10px 0px 10px 125px;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 30px 30px 30px 30px;
            -moz-border-radius: 30px 30px 30px 30px;
            -webkit-border-radius: 30px 30px 30px 30px;
        }
        
        #winter {
            display: table;
            table-layout: fixed;
        }
        
        #winter::before {
            content: "WINTER";
            color: #ffffff;
            display: table-cell;
            transform: translateX(-50px);
            vertical-align: middle;
            font-size: 1.75rem;
            word-break: break-all;
            width: 0.7rem;
            text-align: center;
            font-weight: 700;
        }

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<body>
    <h1>2017 Surface Force Significant Events</h1>
    <div id="winter" class="ml-250">
        <div class="w3-row">
            <div class="w3-twothird">
                <table class="">
                    <tbody>
                        <tr>
                            <td>01/23/17</td>
                            <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
                        </tr>
                        <tr>
                            <td>02/03/17</td>
                            <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
                        </tr>
                        <tr>
                            <td>02/12/17</td>
                            <td>Navy Christens Future Tulsa</td>
                        </tr>
                        <tr>
                            <td>03/01/17</td>
                            <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
                        </tr>
                        <tr>
                            <td>03/07/17</td>
                            <td>Navy Conducts Successful Missile Test Firing</td>
                        </tr>
                        <tr>
                            <td>03/07/17</td>
                            <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
                        </tr>
                        <tr>
                            <td>03/23/17</td>
                            <td>USS Lake Erie Assists Distressed Mariners</td>
                        </tr>
                        <tr>
                            <td>03/29/17</td>
                            <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
                        </tr>
                        <tr>
                            <td>03/31/17</td>
                            <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="w3-third">
                <table>
                    <tbody>
                        <tr>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                        </tr>
                        <tr>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

最佳答案

您可以通过position:absolute/relative 使用容器和伪对象来绘制虚线边框:https://codepen.io/gc-nomade/pen/Kyarez

.hoz-dash {
  position:relative;/* use it as reference for absolute pseudos */
}
.hoz-dash:before,
.hoz-dash:after{/* generate the pseudos of each containers and set commun styles */
   content:'';
  position:absolute;
  left:50px;
  top:50%;
  border:dashed 3px gray;/* uodate border side, color and thickness to your needs */
}
.hoz-dash:before {
  width:200px;/* give it a width */
}
.hoz-dash:nth-child(even):before {
  width:75px;/* reset width for shorter ones */
}
.hoz-dash:not(:last-of-type):after {/* draw the side but not on the last one */
  height:100%;
}

body {
            width: 1200px;
            font-size: .9335rem
        }
        
        h1 {
            width: 95%;
            margin: .8rem auto;
            overflow: hidden;
            text-align: center;
            color: #0A3782;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 0px 14px 28px #000000;
        }
        
        h1::before,
        h1::after {
            content: "";
            display: inline-block;
            width: 70%;
            margin: 0 .5em 0 -55%;
            vertical-align: middle;
            border-bottom: 1px solid #000000;
        }
        
        h1:after {
            margin: 0 -55% 0 .5em;
        }
        
        #vert-dash::before {
            content: "";
            display: inline-block;
            height: 70%;
            margin: 0 .5em 0 -55%;
            vertical-align: middle;
            border-left: 1.0px dashed #000000;
        }
        
        .ml-250 {
            width: 970px;
            margin: 10px 0px 10px 250px;
        }
        
        .ml-125 {
            width: 970px;
            margin: 10px 0px 10px 125px;
        }
        
        #winter, #fall,#spring,#summer  {
            display: table;
            table-layout: fixed;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 50px 30px 30px 50px;
            -moz-border-radius: 50px 30px 30px 50px;
            -webkit-border-radius: 50px 30px 30px 50px;
        }
        
        #winter::before,        
        #spring::before,
        #summer::before,
        #fall::before {
            content: attr(id);
          font-variant:small-caps;
            color: #ffffff;
            display: table-cell;
            transform: translateX(-50px);
            vertical-align: middle;
            font-size: 2rem;
            line-height:1.85rem;
            word-break: break-all;
            width: 2rem;
            text-align: center;
            font-weight: 700;
        }
        
        .lft-pos-10 {
            display: flex;
            align-items: center;
            position: relative;
            left: -10px;
            border-radius: 50px 0px 0px 50px;
            -moz-border-radius: 50px 0px 0px 50px;
            -webkit-border-radius: 50px 0px 0px 50px;
        }
        
        .w3-twothird {
            width: 64.66666%;
        }

.hoz-dash {
  position:relative;
}
.hoz-dash:before,
.hoz-dash:after{
   content:'';
  position:absolute;
  left:50px;
  top:50%;
  border-top:dashed 4px gray;
}
.hoz-dash:before {
  width:200px;
}
.hoz-dash:nth-child(even):before {
  width:75px;
}
.hoz-dash:not(:last-of-type):after {
  height:100%;
  border-top:dashed 0 gray;
  border-left:dashed 4px gray
}

<body>
    <h1>2017 Surface Force Highlights</h1>
    <div id="vert-dash">
        <div class="hoz-dash">
            <div id="winter" class="ml-250">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td>01/23/17</td>
                                    <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
                                </tr>
                                <tr>
                                    <td>02/03/17</td>
                                    <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
                                </tr>
                                <tr>
                                    <td>02/12/17</td>
                                    <td>Navy Christens Future Tulsa</td>
                                </tr>
                                <tr>
                                    <td>03/01/17</td>
                                    <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>Navy Conducts Successful Missile Test Firing</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
                                </tr>
                                <tr>
                                    <td>03/23/17</td>
                                    <td>USS Lake Erie Assists Distressed Mariners</td>
                                </tr>
                                <tr>
                                    <td>03/29/17</td>
                                    <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
                                </tr>
                                <tr>
                                    <td>03/31/17</td>
                                    <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="spring" class="ml-125">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td>01/23/17</td>
                                    <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
                                </tr>
                                <tr>
                                    <td>02/03/17</td>
                                    <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
                                </tr>
                                <tr>
                                    <td>02/12/17</td>
                                    <td>Navy Christens Future Tulsa</td>
                                </tr>
                                <tr>
                                    <td>03/01/17</td>
                                    <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>Navy Conducts Successful Missile Test Firing</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
                                </tr>
                                <tr>
                                    <td>03/23/17</td>
                                    <td>USS Lake Erie Assists Distressed Mariners</td>
                                </tr>
                                <tr>
                                    <td>03/29/17</td>
                                    <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
                                </tr>
                                <tr>
                                    <td>03/31/17</td>
                                    <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="summer" class="ml-250">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td>01/23/17</td>
                                    <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
                                </tr>
                                <tr>
                                    <td>02/03/17</td>
                                    <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
                                </tr>
                                <tr>
                                    <td>02/12/17</td>
                                    <td>Navy Christens Future Tulsa</td>
                                </tr>
                                <tr>
                                    <td>03/01/17</td>
                                    <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>Navy Conducts Successful Missile Test Firing</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
                                </tr>
                                <tr>
                                    <td>03/23/17</td>
                                    <td>USS Lake Erie Assists Distressed Mariners</td>
                                </tr>
                                <tr>
                                    <td>03/29/17</td>
                                    <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
                                </tr>
                                <tr>
                                    <td>03/31/17</td>
                                    <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="fall" class="ml-125">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td>01/23/17</td>
                                    <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
                                </tr>
                                <tr>
                                    <td>02/03/17</td>
                                    <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
                                </tr>
                                <tr>
                                    <td>02/12/17</td>
                                    <td>Navy Christens Future Tulsa</td>
                                </tr>
                                <tr>
                                    <td>03/01/17</td>
                                    <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>Navy Conducts Successful Missile Test Firing</td>
                                </tr>
                                <tr>
                                    <td>03/07/17</td>
                                    <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
                                </tr>
                                <tr>
                                    <td>03/23/17</td>
                                    <td>USS Lake Erie Assists Distressed Mariners</td>
                                </tr>
                                <tr>
                                    <td>03/29/17</td>
                                    <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
                                </tr>
                                <tr>
                                    <td>03/31/17</td>
                                    <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

注意，当要应用的规则相似时，您可以使用逗号分隔 CSS 选择器。 font-variant 或 font-style 可用于将小写字符转换为大写字符。

关于html - 将 CSS 属性应用于 HTML 代码以实现图像的边框和虚线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47208998/

文章推荐： java - 无法弄清楚如何使用另一个类的 getSource

文章推荐： python - 两列可能组合的并集

文章推荐： c - C语言for循环中的问题

文章推荐： python - 在一行中打印文本文件中的文本

r - 应用于 3 个变量的数据框转换
我写了几个命令来转换数据框，但我想将我写的代码简化为四个部分。第 1,2 和 3 部分用于计算第 1、2 和 3 列(计算每列重复值的次数，并完成 0 和三列最大值之间的缺失数)。第四部分是加入前面的
scala - 应用于 Scala 函数的类型参数
我试图理解应用于函数的类型参数。我想在下面的方法中使用通用类型，但为了我的理解使用 String 和 Int。当我如下定义一个函数时 def myfunc[Int](f:String => I
应用于 DIV 内容的 CSS
我有一个像下面这样的 DIV: // link to some js .js 在 div 中呈现最新的文章摘要。然而，它在 Calibri
gridview - 应用于 gridview 中的边界字段的格式不起作用
我在 GridView 中有以下列，一列是日期，另一列是美元金额。我应用了格式并将 HtmlEncode 属性设置为 false，但值仍然未格式化: 这就是这些值在 GridView 中的显示方式
haskell - 应用于 Haskell 中标记类型的通用函数
假设我已经定义了这些类型: data Km = Km Float deriving (Show, Eq) data Mile = Mile Float deriving (Show, Eq
haskell - 关于上下文中的值(应用于 Monad)
我有一个关于 value in context 的小问题。取 Just 'a'，所以在这种情况下 Maybe 类型上下文中的值是 'a' 采用[3]，因此在这种情况下，[a] 类型上下文中的值为3
rollapply 应用于 xts 对象
require(quantmod) require(PerformanceAnalytics) getSymbols('INTC') x<- monthlyReturn(INTC) rollapply
vba - 应用于 Word 修订版的更改使两个段落合二为一
我正在使用 VBA 对“已应用字轨更改”文档进行更改。红色段落结束标记是插入段落结束标记。(打开“跟踪更改”> 将光标放在第一段末尾 > 按 Enter > 插入新段落内容 > 格式风格不同) 我需
c++ - 应用于 const 和非常量对象的引用返回方法
考虑以下代码: class A{ my_method(const B& b){ import_something_from_c(this, b.getC()); // does some
ios - 应用于 Material 时像素化图像纹理
我正在为自定义 Material 分配图像。分配的图像看起来有点像素化，类似于此图像我已经将抗锯齿设置为 4 倍。我该如何解决这个问题？最佳答案尝试将 Material 的 mipFilter
css - 应用于 HTML 元素的样式总是被覆盖
我将样式应用于元素和元素。是否可以在上使用样式元素应用于似乎不遵循 CSS 特异性的通常规则。这是真的吗？示例:http://jsfiddle.net/59dpy/ 尝试将所有背景色设为红
html - 应用于 TD 时垂直虚线边框不均匀
有没有办法将垂直虚线边框应用于没有他们(边界)合并？我说的是附图上的东西——有 3 个这里的元素，每个元素包含 2 的。如果我申请 border-right: 1px dashed black到
html - 应用于 body 时线性渐变不起作用
当我在 CSS 中对主体应用线性渐变时，如下所示 body { background: linear-gradient(#10416b, black); } 它不会将它应用到整个网页，而是将它应用到页
css - 应用于 td 的边界半径没有内半径
当我将边框和边框半径应用于 td 时，内半径是一个直 Angular ，根本不是圆的。最佳答案问题很可能是背景不透明的子元素会剪掉边框的内半径。要解决此问题，您可以在 td 上应用 overfl
CSS 应用于 SVG 组元素但不在使用时
基本上，我有一个小的 SVG，它使用一个组来定义一个可重用的符号。该组包括我想在 CSS 中设置动画的路径。我面临的问题是只有“原始”元素应用了 CSS，“使用过”的元素没有。 .player_arr
html - 应用于 td 的宽度属性
宽度属性在这里不起作用: td { height: 50px; width: 25px; border: 1px
Java:应用于 Map 泛型类型的多态性
我想要一个函数(例如)在两种情况下输出 Map 的所有值: Map map1 = new HashMap(); Map map2 = new HashMap(); output(map1, "1234
java - 应用于 AlertDialog 的样式无法正常工作
我被要求将我们应用中的警报对话框的外观与应用主题使用的外观相匹配。我设法将样式应用于应用程序中的所有警报对话框，并将其用作应用程序主题的一部分，但有些情况下样式应用不正确。例如，当警报对话框包含“
ios - 应用于 CGPath 的比例变换会影响渲染质量吗？
我有一个 CGPath(由 UIBezierPath 创建)，我想通过应用 CGAffineTransformScale 将其缩放到我想要的任何大小。这会影响我的绘图质量(在转换为图像时)吗？如果不
c++:应用于 vector 的STL算法也适用于其他容器对象吗？
您好，我已经在 vector 上使用了一些 STL 算法，例如 find_if、count_if、sort、push_back 等。现在我想为所有容器对象( vector 、列表、映射、集合)制作一个

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将 CSS 属性应用于 HTML 代码以实现图像的边框和虚线