Đường viền trên cùng và dưới cùng chấm nhỏ hơn văn bản

Question

Tôi muốn đạt được đường viền trên và dưới như hình dưới đây làm cách nào tôi có thể đạt được với các thủ thuật CSS?

Challenge là tôi không muốn toàn bộ chiều rộng có đường viền và nó phải được đáp ứng.

Hình ảnh phiên bản dành cho thiết bị di động là http://i.imgur.com/XZTW28N.jpg và cũng sẽ hoạt động trong trình duyệt trên máy tính để bàn và thiết bị di động.

Tôi đã thử với đường viền% chiều rộng nhưng không hoạt động.

Tôi đã viết mã bên dưới nhưng nó không phải là câu trả lời hoàn hảo 100% cho tôi.

HTML:

<h1>How it Works</h1 

CSS:

h1:before, h1:after { 
    content: ""; 
    height: 1px; 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); 
    display: block; 
    margin-bottom: 10px; 
    margin-top: 10px; 
} 

http://jsfiddle.net/wjhnX/488/

Answer 1

tôi đã thực hiện một vài thay đổi trong CSS của bạn:

h1{ 
    text-align: center; 
    font-size: 70px; 
} 

h1:before, h1:after{ 
    position: relative; 
    content: ""; 
    width: 30%; 
    left: 35%; 
    display: block; 
    margin-bottom: 10px; 
    margin-top: 10px; 
    border-bottom: 5px dotted yellow; 
} 

DEMO

EDIT:

Nếu bạn muốn có một cố định width bạn có thể thêm:

h1:before, h1:after{ 
    width: 150px;  /* You can change this value */ 
    left: 50%; 
    transform: translateX(-50%); 
} 

DEMO2

Answer 2

Dưới đây là cách tiếp cận khác sử dụng hình nền radial-gradient để sản xuất các dấu chấm ở phía trên và đáy. Đầu ra là đáp ứng và không. các chấm ở trên cùng và dưới cùng được xác định bởi chiều rộng (ví dụ: width: 108px tạo ra 9 chấm là background-size trong trục x là 12px).

Ưu điểm của phương pháp này so với các phương pháp khác là điều này cho phép kiểm soát lớn hơn kích thước của dấu chấm và khoảng trống giữa các chấm. Nhược điểm là browser support for radial-gradient thấp hơn (IE10 +) so với phương pháp đường viền chấm chấm.

h1 { 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    line-height: 1em; 
 
    padding: 0.625em; 
 
    font-family: Calibri; 
 
    font-weight: 100; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 108px; /* multiples of background-size in X-axis */ 
 
    height: 100%; 
 
    top: 0px; 
 
    left: calc(50% - 50px); 
 
    background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%); 
 
    background-size: 12px 6px; 
 
    background-repeat: repeat-x; 
 
    background-position: 50% 0.125em, 50% 2em; 
 
} 
 
/* Just for demo */ 
 

 
body { 
 
    background: rgb(9, 133, 143); 
 
    color: white; 
 
}

<!-- library included to support older browsers --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<h1>How it works</h1> 
 

 
<h1>How it works with long text</h1>

Ảnh chụp màn hình với dấu chấm lớn:

---

Tất cả những gì là cần thiết để được thực hiện để làm cho các dấu chấm kích thước nhỏ hơn là để giảm tỷ lệ dừng màu của gradient xuyên tâm. Tỷ lệ phần trăm nhỏ hơn, các chấm nhỏ hơn.

h1 { 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    line-height: 1em; 
 
    padding: 0.625em; 
 
    font-family: Calibri; 
 
    font-weight: 100; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 108px; /* multiples of background-size in X-axis */ 
 
    height: 100%; 
 
    top: 0px; 
 
    left: calc(50% - 50px); 
 
    background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%); 
 
    background-size: 12px 6px; 
 
    background-repeat: repeat-x; 
 
    background-position: 50% 0.125em, 50% 2em; 
 
} 
 

 
/* Just for demo */ 
 

 
body { 
 
    background: rgb(9, 133, 143); 
 
    color: white; 
 
}

<!-- library included to support older browsers --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<h1>How it works</h1> 
 

 
<h1>How it works with long text</h1>

Ảnh chụp màn hình với các chấm nhỏ:

Answer 3

Bạn có thể sử dụng box-shadows cũng để đạt được điều này, đầu tiên tạo ra một psuedo-yếu tố after trên đầu và một before phần tử giả ở phía dưới rồi cung cấp cho hai trong số box-shadows

body{ 
 
\t background:#09858F; 
 
} 
 

 
div{ 
 
\t position:relative; 
 
\t display:inline-block; 
 
\t margin:100px; 
 
} 
 
h1{ 
 
\t text-align:center; 
 
\t font-family: Calibri; 
 
\t font-size:50px; 
 
\t color:#fff; 
 
\t margin:50px; 
 
} 
 

 
h1:after{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t left:30%; 
 
\t height:10px; 
 
\t width:10px; 
 
\t background:yellow; 
 
\t top:20%; 
 
\t border-radius:50%; 
 
\t box-shadow:20px 0 0 0 yellow,40px 0 0 0 yellow,60px 0 0 0 yellow,80px 0 0 0 yellow,100px 0 0 0 yellow,120px 0 0 0 yellow,140px 0 0 0 yellow,160px 0 0 0 yellow; 
 
} 
 
h1:before{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t left:30%; 
 
\t height:10px; 
 
\t width:10px; 
 
\t background:yellow; 
 
\t bottom:20%; 
 
\t border-radius:50%; 
 
\t box-shadow:20px 0 0 0 yellow,40px 0 0 0 yellow,60px 0 0 0 yellow,80px 0 0 0 yellow,100px 0 0 0 yellow,120px 0 0 0 yellow,140px 0 0 0 yellow,160px 0 0 0 yellow; 
 
}

<div><h1>How it Works</h1></div>