将CSS属性应用于HTML代码以从图像实现边框和虚线 [英] Apply a CSS Properties to HTML Code to Achieve Border and Dashed Line from Image
本文介绍了将CSS属性应用于HTML代码以从图像实现边框和虚线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个PDF文档，我试图通过HTML重新创建。该文件是日期和事件或每个季节的列表。我不确定在哪里应用边框属性来创建左边框内的内部渐变和框内的边框半径。
I have a PDF document that I am trying to re-create via HTML. The document is a list of date and events or each season. I am not sure where to apply the border properties to create the inside gradient in the left border and the border radius inside the box.
这是PDF的图像我正在尝试重新创建。
This is an image of the PDF that I am trying to re-create.
我管理过使用以下代码实现大部分内容。
I have managed to achieve most of it with the following below code.
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
you could use the container and pseudos via position:absolute/relative to draw the dashed borders : 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 可用于将小写字符转换为大写字母。
Note, you can use the comma to separate CSS selectors when the rules to apply are similar. font-variant or font-style can be used to turn lowercase charactere into uppercase .
这篇关于将CSS属性应用于HTML代码以从图像实现边框和虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
