Tôi hiện đang chơi với CSS3 và cố gắng đạt được hiệu ứng văn bản như thế này (bóng mờ bên trong màu đen):

Nhưng tôi không thể tìm ra cách tạo bóng chữ bên trong văn bản. Tôi tự hỏi liệu có còn khả thi không vì phần tử box-shadow có thể hiển thị bóng bên trong như thế này:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Bất kỳ ý tưởng?

Đây là một mẹo nhỏ mà tôi đã khám phá ra bằng cách sử dụng các phần tử giả :beforevà :after:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

Thuộc tính tiêu đề cần giống với nội dung. Demo: http://dabblet.com/gist/1609945

Bạn sẽ có thể làm điều đó bằng cách sử dụng text-shadow, hãy suy nghĩ như sau:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

đây là một ví dụ: http://jsfiddle.net/ekDNq/

Đây là cách thử tốt nhất của tôi:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>
   

Vấn đề là làm sao để kẹp cái bóng chảy ra xung quanh viền !!! Tôi đã thử trong webkit bằng cách sử dụng background-clip: text, nhưng webkit hiển thị bóng trên nền nên nó không hoạt động.

Tạo Mặt nạ văn bản bằng CSS?

Nếu không có lớp mặt nạ trên cùng thì không thể tạo bóng bên trong thực sự trên văn bản.

Có lẽ ai đó nên khuyên W3C thêm background-clip: reverse-text , điều này sẽ cắt một mặt nạ xuyên qua nền thay vì cắt nền để vừa với bên trong văn bản.

Hoặc hiển thị bóng chữ như một phần của nền và cắt nó bằng background-clip: text.

Tôi đã cố gắng định vị tuyệt đối một phần tử văn bản giống hệt phía trên nó, nhưng vấn đề là background-clip: văn bản cắt nền để vừa với bên trong văn bản, nhưng chúng tôi cần điều đó ngược lại.

Tôi đã thử sử dụng text-stroke: 20px white; trên cả phần tử này và phần tử phía trên nó, nhưng nét chữ đi vào cũng như ra ngoài.

Phương pháp thay thế

Vì hiện tại không có cách nào để tạo mặt nạ văn bản ngược trong CSS, bạn có thể chuyển sang SVG hoặc Canvas và tạo hình ảnh thay thế văn bản với ba lớp để có được hiệu ứng của bạn.

Vì SVG là một tập hợp con của XML, văn bản SVG vẫn có thể lựa chọn và có thể tìm kiếm được, và hiệu ứng có thể được tạo ra với ít mã hơn Canvas.

Sẽ khó hơn để đạt được điều này với Canvas vì nó không có dom với các lớp như SVG.

Bạn có thể tạo SVG phía máy chủ hoặc dưới dạng phương pháp thay thế văn bản javascript trong trình duyệt.

Đọc thêm:

SVG so với Canvas:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Cắt và tạo mặt nạ với Văn bản SVG:

http://www.w3.org/TR/SVG/text.html#TextElement

^{Giải thích chính xác hơn về CSS trong câu trả lời của kendo451 .}

Có một cách khác để có được ảo giác bóng bên trong lạ mắt,
mà tôi sẽ giải thích trong ba bước đơn giản. Giả sử chúng ta có HTML này:

<h1>Get this</h1>

và CSS này:

h1 {
  color: black;
  background-color: #cc8100;
}

Bước 1

Hãy bắt đầu bằng cách làm cho văn bản trong suốt:

h1 {
  color: transparent;
  background-color: #cc8100;
}

Bước 2

Bây giờ, chúng ta cắt nền đó thành hình dạng của văn bản:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

Bước 3

Bây giờ, điều kỳ diệu: chúng ta sẽ đặt một vệt mờ text-shadow, sẽ ở phía trước nền , do đó tạo ấn tượng về một cái bóng bên trong!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

Xem kết quả cuối cùng .

Nhược điểm?

• Chỉ hoạt động trong Webkit ( background-clipkhông được text).
• Nhiều bóng? Đừng nghĩ nữa.
• Bạn cũng có được một ánh sáng bên ngoài.

Một ví dụ thanh lịch mà không cần trình bao bọc định vị hoặc nội dung trùng lặp trong đánh dấu:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

Trông cũng đẹp trên nền tối:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

LIÊN KẾT VÀ TÔI VÀ LIÊN KẾT ME2

Bạn có thể làm điều này. Thật không may, không có cách nào để sử dụng phần chèn trên bóng văn bản, nhưng bạn có thể giả mạo nó bằng màu sắc và vị trí. Giảm độ mờ ngay xuống và sắp xếp bóng dọc theo phía trên bên phải. Một cái gì đó như thế này có thể thực hiện thủ thuật:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... nhưng bạn sẽ cần phải thực sự, thực sự cẩn thận về màu sắc bạn sử dụng, nếu không, nó sẽ bị mất. Về cơ bản nó là một ảo ảnh quang học nên sẽ không hoạt động trong mọi bối cảnh. Nó cũng không thực sự trông tuyệt vời ở kích thước phông chữ nhỏ hơn, vì vậy hãy lưu ý điều đó.

Không cần nhiều bóng hoặc bất kỳ thứ gì lạ mắt như vậy, bạn chỉ cần bù bóng của mình theo trục y âm.

Đối với văn bản tối trên nền sáng:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

Nếu bạn có nền tối thì bạn chỉ cần đảo ngược màu và vị trí y:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

Thử với các giá trị rgba, độ mờ và độ mờ để có được hiệu ứng vừa phải. Nó sẽ phụ thuộc rất nhiều vào màu sắc và phông chữ bạn có, và phông chữ càng nặng thì càng tốt.

Hãy thử viên ngọc nhỏ của một biến thể:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

Tôi thường coi "không có câu trả lời" như một thách thức

Tôi đã thấy nhiều giải pháp được đề xuất, nhưng không có giải pháp nào đúng như những gì tôi hy vọng.

Đây là cách tốt nhất của tôi về vấn đề này , trong đó màu trong suốt, nền và bóng văn bản trên cùng là cùng một màu với các độ mờ khác nhau, mô phỏng mặt nạ và bóng văn bản thứ hai là phiên bản tối hơn, bão hòa hơn của màu bạn. thực sự muốn (khá dễ thực hiện với HSLA).

(btw, văn bản và kiểu dáng dựa trên OP của luồng dupe )

Tôi đã gặp một vài trường hợp mà tôi cần bóng bên trong trên văn bản và những điều sau đây đã hoạt động tốt với tôi:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

Điều này đặt độ mờ của văn bản thành 80%, sau đó tạo ra hai bóng:

• Đầu tiên là một bóng trắng (giả sử văn bản trên nền trắng) lệch 1px từ bên trái và 2px từ trên cùng, làm mờ 3px.
• Bóng thứ hai là bóng đen có thể nhìn thấy qua văn bản có độ mờ 80% nhưng không qua bóng đầu tiên, có nghĩa là nó chỉ hiển thị bên trong các chữ cái văn bản nơi bóng đầu tiên bị dịch chuyển (1px từ bên trái và 2px từ trên cùng). Để thay đổi độ mờ của bóng có thể nhìn thấy này, hãy sửa đổi tham số làm mờ cho bóng lớp đầu tiên.

Cảnh báo

• Điều này sẽ chỉ hoạt động nếu có thể đạt được màu sắc mong muốn của văn bản mà không cần phải có độ mờ 100%.
• Điều này sẽ chỉ hoạt động nếu màu nền là đồng nhất (vì vậy, nó sẽ không hoạt động đối với ví dụ cụ thể của người hỏi khi văn bản nằm trên nền có kết cấu).

Đây là một liên kết nói về cách thực hiện việc này, nó phải là những gì bạn đang tìm kiếm:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Có vẻ như nó đang hoạt động: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Anh ấy đang sử dụng nhiều bóng để đạt được hiệu ứng đó như được giải thích ở đây: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Có vẻ như mọi người đã có câu trả lời cho câu hỏi này. Tôi thích giải pháp từ @Web_Designer. Nhưng nó không cần quá phức tạp và bạn vẫn có thể có được bóng mờ bên trong mà bạn đang tìm kiếm.

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

Đây là ví dụ điển hình nhất mà tôi từng thấy. http://lab.simurai.com/carveme/

Nguồn trên gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Xây dựng dựa trên :before :afterkỹ thuật của web_designer, đây là một cái gì đó gần hơn với cái nhìn của bạn:

Đầu tiên, làm cho văn bản của bạn có màu của bóng bên trong (màu đen trong trường hợp của OP).

Bây giờ, sử dụng lớp: sau psuedo để tạo một bản sao trong suốt của văn bản gốc, được đặt trực tiếp trên đầu nó. Gán bóng văn bản thông thường cho nó mà không cần bù đắp. Gán màu văn bản gốc cho bóng và điều chỉnh alpha nếu cần.

http://dabblet.com/gist/2499892

Bạn không có quyền kiểm soát hoàn toàn đối với độ lan rộng, v.v. của bóng như bạn làm trong PS, nhưng đối với các giá trị mờ nhỏ hơn, nó khá khả thi. Bóng đi qua các giới hạn của văn bản, vì vậy nếu bạn đang làm việc trong môi trường có hậu cảnh - nền trước có độ tương phản cao, nó sẽ hiển nhiên. Đối với các mục có độ tương phản thấp hơn, đặc biệt là những mục có cùng màu sắc, nó không quá đáng chú ý. Ví dụ, tôi đã có thể tạo ra văn bản khắc trông rất đẹp trên nền kim loại bằng cách sử dụng kỹ thuật này.

Đây là một giải pháp tuyệt vời cho bóng văn bản chèn TRUE bằng cách sử dụng thuộc tính background-clip CSS3:

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Đây là những gì tôi nghĩ ra sau khi xem xét một số ý tưởng ở đây. Ý tưởng chính là màu của văn bản hòa trộn với cả hai bóng và lưu ý rằng điều này đang được sử dụng trên nền xám (nếu không màu trắng sẽ không hiển thị tốt).

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Hãy thử ví dụ này cho bóng văn bản chèn. Đây là HTML

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

và CSS

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

đối với bóng hộp:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

bạn có thể thấy văn bản trực tuyến và bóng hộp: văn bản trực tuyến và bóng hộp

để biết thêm ví dụ, bạn có thể truy cập địa chỉ này: ví dụ thêm mã freeclup

Có một cách đơn giản hơn nhiều để đạt được điều này

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voilà

Đối với văn bản có kích thước bình thường trên các nút ish nhỏ

Tôi thấy các ý tưởng khác trên trang này bị mất hiệu quả khi được sử dụng trên các nút nhỏ với chữ viết nhỏ. Câu trả lời này mở rộng trên câu trả lời của RobertPitt .

Đây là một tinh chỉnh nhỏ:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

Ghi chú:

Tôi đã sử dụng trang web này để tinh chỉnh các sắc thái màu.

Tôi đang sử dụng nó từ trang web này, nó cũng có vẻ tốt. Hãy nhìn vào nó Bóng bên trong