Câu hỏi Đường viền trên cùng và dưới cùng được phân tách ngắn hơn văn bản


Tôi muốn đạt được biên giới trên và dưới như hình dưới đây làm thế nào tôi có thể đạt được với thủ thuật CSS?

Image

Thách thức là tôi không muốn toàn bộ chiều rộng với đường viền và nó cũng nên đáp ứng.

Hình ảnh phiên bản di động là http://i.imgur.com/XZTW28N.jpg và nó cũng 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 nó không hoạt động.

Tôi đã viết mã dưới đây nhưng nó không phải là 100% câu trả lời hoàn hảo 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/


9
2017-09-22 01:21


gốc


Bạn có thể thử sử dụng transform: translateX(50%); width: 50% trên :before,:after cũng như text-align: center; trên h1. - area28
@ area28 Tôi đã thử rằng một nhưng với đáp ứng lớn hơn và nhỏ hơn với nó không hoạt động. - AjmeraInfo


Các câu trả lời:


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;
}

BẢN GIỚI THIỆU

CHỈNH SỬA:

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


10
2017-09-22 01:27



Cảm ơn bạn đã trả lời nhanh. nhưng tôi không muốn toàn bộ đường viền trên cùng và dưới cùng. Muốn giống như hình ảnh. biên giới trung tâm và chỉ vài px. - AjmeraInfo
Tôi đã cập nhật câu trả lời của mình. Thấy một bản trình diễn mới tại đây ;) Bạn cũng có thể sửa đổi width và left với các giá trị giải quyết vấn đề của bạn, hãy giữ công thức này: width + 2*left = 100. - lmgonzalves
Vẫn còn có vấn đề. Nó cũng nên hoạt động với sự đáp ứng. Hình ảnh phiên bản trên thiết bị di động thực tế là i.imgur.com/XZTW28N.jpg - AjmeraInfo
Tôi không thể hiểu những gì bạn đang cố gắng làm. Tôi nghĩ hình ảnh là hành vi đúng đắn, phải không? Bạn có thể giải thích thêm một chút về những gì bạn muốn không? - lmgonzalves
Tôi muốn cố định với dòng "px". nhưng trung tâm của văn bản trên và dưới. Trong bản demo của bạn với lớn hơn với dòng đi lớn hơn. awesomescreenshot.com/03559a912e - AjmeraInfo


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

body{
	background:#09858F;
}

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

h1:after{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	top:20%;
	border-radius:50%;
	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{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	bottom:20%;
	border-radius:50%;
	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>


4
2017-09-22 14:16





Đây là một cách tiếp cận khác bằng cách sử dụng radial-gradient hình nền để tạo các chấm ở trên cùng và dưới cùng. Đầ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 như 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 các chấm và khoảng trống giữa các chấm. Nhược điểm là hỗ trợ trình duyệt cho 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 có dấu chấm lớn:

enter image description here


Tất cả những gì cần thiết để làm cho các chấm nhỏ hơn về kích thước là giảm tỷ lệ phần trăm 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 có các chấm nhỏ hơn:

enter image description here


2
2017-09-22 13:01