Hiệu ứng phác thảo cho văn bản


329

Có cách nào trong CSS để đưa ra các phác thảo cho văn bản với các màu khác nhau không? Tôi muốn làm nổi bật một số phần trong văn bản của mình để làm cho nó trực quan hơn - như tên, liên kết, v.v. Thay đổi màu liên kết, v.v ... là phổ biến hiện nay, vì vậy tôi muốn một cái gì đó mới.


17
@Dan Tốt hơn ngụ ý khác nhau. Lời khuyên của bạn nói chung là tốt nhưng nó cũng có thể kìm hãm thử nghiệm sáng tạo. Hơn nữa, nó thường không phải là chung chung = tốt, tốt, đó là phổ biến = hầu như không đủ tốt.
Konrad Rudolph

7
@Dan Grossman: thế giới phát triển từ những ý tưởng mới, không phải mọi thứ mới đều đáng khinh.
yoda

7
@yoda Cú pháp của bạn không bình thường. / EDIT không bao giờ để tâm, nhầm lẫn bạn với người khác.
Konrad Rudolph

Bạn có thể mô tả những gì bạn cần chi tiết hơn. Tôi không chắc chính xác ý bạn là gì khi bạn nói rằng bạn muốn 'đưa ra những phác thảo cho văn bản với nhiều màu sắc khác nhau'
Yi Jiang

1
có thể trùng lặp CSS Font Border?
Adam Jensen

Câu trả lời:


452

Có một thuộc tính webkit thử nghiệm được gọi text-stroketrong CSS3, tôi đã cố gắng để nó hoạt động được một thời gian nhưng cho đến nay vẫn không thành công.

Những gì tôi đã làm thay vào đó là sử dụng thuộc tính đã được hỗ trợ text-shadow(tôi hỗ trợ trong Chrome, Firefox, Opera và IE 9).

Sử dụng bốn bóng để mô phỏng một văn bản được vuốt ve:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

Tôi đã làm một bản demo cho bạn ở đây

Và một ví dụ lơ lửng có sẵn ở đây


Như Jason C đã đề cập trong các bình luận, thuộc tính text-shadowCSS hiện được hỗ trợ bởi tất cả các trình duyệt chính, ngoại trừ Opera Mini. Trường hợp giải pháp này sẽ hoạt động để tương thích ngược (không thực sự là vấn đề liên quan đến các trình duyệt tự động cập nhật) Tôi tin rằng text-strokeCSS nên được sử dụng.


12
Đáng buồn thay, IE không hỗ trợ text-shadowcho đến IE10. Thật kỳ lạ, IE9 hỗ trợ box-shadownhưng không text-shadow.
Web_Designer

14
Dưới đây là một bản tóm tắt của hỗ trợ trình duyệt chotext-shadow . Có vẻ như hiện tại (3 năm sau khi câu trả lời này được đăng), nó được hỗ trợ bởi tất cả các trình duyệt chính ngoại trừ Opera Mini, cho thấy "hỗ trợ một phần" (nó bỏ qua blur-radius).
Jason C

3
Điều này thêm một hiệu ứng mỏng hơn:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
Tên lớp tuyệt vời
công dân

4
Jason C chỉ ra text-shadowhỗ trợ, không text-stroke. Mà chỉ được hỗ trợ bởi webkit tại thời điểm này.
Gregoire D.

100

Chỉnh sửa: text-stroke hiện đã khá hoàn thiện và được triển khai trong hầu hết các trình duyệt . Nó dễ dàng hơn, sắc nét hơn và chính xác hơn. Nếu đối tượng trình duyệt của bạn có thể hỗ trợ nó, bây giờ bạn nên sử dụng text-stroketrước, thay vì text-shadow.


Bạn có thể và nên làm điều này chỉ với text-shadowhiệu ứng mà không có bất kỳ sự bù đắp nào:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Tại sao? Khi bạn bù nhiều hiệu ứng bóng, bạn sẽ bắt đầu nhận thấy các góc vô duyên, lởm chởm: Hiệu ứng đổ bóng tạo ra các góc lởm chởm đáng chú ý.


Có hiệu ứng đổ bóng văn bản chỉ trong một vị trí sẽ loại bỏ các độ lệch, nghĩa là Nếu bạn cảm thấy quá mỏng và thay vào đó sẽ thích đường viền tối hơn, không vấn đề gì - bạn có thể lặp lại hiệu ứng tương tự (giữ nguyên vị trí và mờ), nhiều lần. Thích như vậy:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Đây là một mẫu chỉ có một hiệu ứng (trên cùng) và hiệu ứng tương tự được lặp lại 14 lần (dưới cùng):


Văn bản mẫu được hiển thị với bóng văn bản

Cũng lưu ý: Vì các đường trở nên quá mỏng, nên tắt kết xuất pixel phụ bằng cách sử dụng
-webkit-font-smoothing: antialiased.


Câu trả lời thú vị, cảm ơn. Tôi thực sự không hiểu ý của bạn bằng cách 'lặp lại' hiệu ứng.
edzillion

Cảm ơn cho font-smoothingtùy chọn, nó đã cải thiện đáng kể đầu ra trong chrome!
Meki

1
Tôi lưu ý rằng nhận xét được thêm vào câu trả lời rằng đột quỵ văn bản hiện được hỗ trợ trong hầu hết các trình duyệt, nhưng caniuse vẫn còn (tháng 8 năm 2016) cho thấy nó không được hỗ trợ trong tất cả các phiên bản IE và Edge và cần -webkit-text-Stroke với bố cục Cờ .css.prefixes.webkit được bật trong Firefox. Methinks không đủ rộng rãi hỗ trợ cho các trang web công cộng nói chung.
Nick Rice

1
Tôi nghĩ rằng việc lặp lại 14 lần một bóng văn bản có thể có một số vấn đề về hiệu suất. Đặc biệt là khi cuộn trên di động.
kaosmos

2
AFAIK text-strokekhông giống như phác thảo thông qua text-shadow. text-strokekhông có tùy chọn để làm cho phác thảo xuất hiện bên ngoài văn bản, điều đó có nghĩa là phác thảo chảy vào văn bản khiến nó thường trông rất kinh khủng. Nói cách khác, text-strokenó không phải là sự thay thế cho text-shadownhững phác thảo
gman

90

Dễ dàng! SVG đến giải cứu.

Đây là một phương pháp đơn giản hóa:

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}
<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

Đây là một bản demo phức tạp hơn .


6
Đây là một giải pháp tuyệt vời và không có vấn đề về hiệu suất liên quan đến bóng văn bản. Sự khác biệt về hiệu suất giữa cách tiếp cận này và sắp xếp nhiều bóng văn bản là rất lớn đối với ứng dụng cụ thể của tôi (IE 10 trên màn hình lớn).
djskinner

3
Điều này mang lại cho tôi hiệu ứng tốt hơn nhiều so với bóng văn bản, bởi vì tôi cần một đường kẻ dày. Cảm ơn bạn!
Andrea

2
Đó là anh chàng vàng nguyên chất !! Cách tiếp cận rất chuyên nghiệp và lành nghề, hoàn hảo trả lời câu hỏi! Giải pháp này đi trước Hội đồng W3 hoặc Google hoặc bất cứ điều gì, xin chúc mừng!
Heitor

Giải pháp này cũng rất phù hợp với tôi nếu tôi không thêm nét vẽ vào textarea :(
Brandito

36

Bạn có thể thử xếp chồng nhiều bóng mờ cho đến khi các bóng trông giống như một nét vẽ, như vậy:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Đây là một câu đố: http://jsfiddle.net/GGUYY/

Tôi chỉ đề cập đến nó trong trường hợp ai đó quan tâm, mặc dù tôi sẽ không gọi đó là giải pháp vì nó thất bại theo nhiều cách khác nhau:

  • nó không hoạt động trong IE cũ
  • nó hiển thị khá khác nhau trong mọi trình duyệt
  • áp dụng rất nhiều bóng rất nặng để xử lý: S

1
Đây thực sự là ý tưởng đơn giản và sáng chói!

1
Cảm ơn, vấn đề với điều này là hiệu suất mặc dù, sử dụng cẩn thận :)
brohr

1
Cái này thật tuyệt. Các lớp bóng tối bổ sung thực sự thêm một số chiều sâu cho nó và nó hoạt động trong IE11, FF36 và Chrome 41.
RockiesMagicNumber

17

Tôi đang tìm kiếm một giải pháp đột quỵ văn bản trình duyệt chéo hoạt động khi được phủ lên hình ảnh nền. nghĩ rằng tôi có một giải pháp cho việc này không liên quan đến đánh dấu thêm, js và hoạt động trong IE7-9 (tôi chưa thử nghiệm 6) và không gây ra vấn đề răng cưa.

Đây là sự kết hợp của việc sử dụng bóng văn bản CSS3, hỗ trợ tốt ngoại trừ IE ( http://caniuse.com/#search=text-shadow ), sau đó sử dụng kết hợp các bộ lọc cho IE. Hiện tại hỗ trợ đột quỵ văn bản CSS3 rất kém.

Bộ lọc IE

Bộ lọc phát sáng ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) trông rất tệ, vì vậy tôi đã không sử dụng nó.

Câu trả lời của David Hewitt liên quan đến việc thêm các bộ lọc dropshadow theo sự kết hợp của các hướng. ClearType sau đó không may bị xóa vì vậy chúng tôi kết thúc bằng văn bản có bí danh xấu.

Sau đó, tôi đã kết hợp một số yếu tố được đề xuất trên useragentman với các bộ lọc dropshadow.

Đặt nó lại với nhau

Ví dụ này sẽ là văn bản màu đen với một nét trắng. Tôi đang sử dụng các lớp html có điều kiện để nhắm mục tiêu IE ( http://paulirish.com/2008/conditable-stylesheets-vs-css-hacks-answer-neither/ ).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Điều này cũng hoạt động trong IE cũ:filter: glow(color=white,strength=1);
mch

16

Chỉ cần thêm câu trả lời này. "Vuốt ve" văn bản không giống như "Phác thảo"

Phác thảo trông tuyệt vời. Vuốt ve trông thật kinh khủng.

Giải pháp SVG được liệt kê ở nơi khác có cùng một vấn đề. Trong số bạn muốn có một phác thảo, bạn cần phải đặt văn bản hai lần. Một lần vuốt ve và một lần nữa không được vuốt ve.

Vuốt ve là không phác thảo

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}
<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: Tôi muốn biết làm thế nào để biến SVG thành kích thước chính xác của bất kỳ văn bản tùy ý nào. Tôi có cảm giác nó khá phức tạp liên quan đến việc tạo ra các Svg, truy vấn nó bằng javascript để có được các phạm vi sau đó áp dụng các kết quả. Nếu có một cách không dễ dàng hơn js tôi muốn biết.


1
Tuyệt vời đây là phương pháp chính xác, phác thảo, không vuốt ve. Hoạt động đẹp và nó gọn gàng và dễ nhìn.
MitchellK

7

Tôi có kết quả tốt hơn với 6 bóng khác nhau:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

Tôi muốn một cái bóng lớn hơn và phải thêm một vài dòng phụ .... 3px 0px 0 # 343a7e, -3px 0px 0 # 343a7e
Jayden Lawson

7

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
<h1>Properly stroked!</h1>


6

Mixin cho SASS này sẽ cho kết quả mượt mà, sử dụng 8 trục:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

Và CSS bình thường:

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

4

Làm việc với các nét dày hơn sẽ có một chút lộn xộn, nếu bạn có niềm vui của sass hãy thử mixin này, không hoàn hảo và tùy thuộc vào trọng lượng đột quỵ, nó tạo ra một lượng css tương đối.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

1
Mixin này không làm việc cho tôi nhưng điều này đã làm: gist.github.com/nathggns/2984123
akirk

0

Nhiều bóng văn bản ..
Một cái gì đó như thế này:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

Bản trình diễn: http://jsfiddle.net/astaosound/gv6zs58m/


0

Trình tạo bóng văn bản

Có rất nhiều câu trả lời tuyệt vời ở đây. Nó sẽ xuất hiện bóng văn bản có lẽ là cách đáng tin cậy nhất để làm điều này. Tôi sẽ không đi vào chi tiết về cách thực hiện điều này với bóng văn bản vì những người khác đã làm điều đó, nhưng ý tưởng cơ bản là bạn tạo nhiều bóng văn bản xung quanh thành phần văn bản. Phác thảo văn bản càng lớn, bạn càng cần nhiều bóng văn bản.

Tất cả các câu trả lời được gửi (kể từ bài đăng này) cung cấp các giải pháp tĩnh cho bóng văn bản. Tôi đã thực hiện một cách tiếp cận khác và đã viết JSFiddle này chấp nhận các giá trị màu, mờ và chiều rộng phác thảo làm đầu vào và tạo thuộc tính bóng văn bản phù hợp cho phần tử của bạn. Chỉ cần điền vào chỗ trống, kiểm tra bản xem trước và nhấp để sao chép css và dán nó vào biểu định kiểu của bạn.


Phụ lục không cần thiết

Rõ ràng, các câu trả lời bao gồm một liên kết đến một JSFiddle không thể được đăng trừ khi chúng cũng chứa mã. Bạn hoàn toàn có thể bỏ qua phụ lục này nếu bạn muốn. Đây là JavaScript từ fiddle của tôi tạo ra thuộc tính bóng văn bản. Xin lưu ý rằng bạn không cần triển khai mã này trong các tác phẩm của riêng mình:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

-2

Tôi cũng gặp vấn đề này và text-shadowđó không phải là một lựa chọn vì các góc sẽ trông tệ (trừ khi tôi có nhiều bóng) và tôi không muốn có bất kỳ vết mờ nào, do đó, lựa chọn duy nhất khác của tôi là làm như sau: Có 2 div, và đối với div nền, đặt một cái -webkit-text-stroketrên đó, sau đó cho phép tạo ra một phác thảo lớn như bạn muốn.

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}
<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

Sử dụng điều này, tôi có thể đạt được một dòng ngoài , bởi vì stroke-widthphương thức không phải là một tùy chọn nếu bạn muốn văn bản của bạn vẫn rõ ràng với một phác thảo rất lớn (vì với stroke-widthphác thảo sẽ bắt đầu bên trong chữ khiến nó không rõ ràng khi chiều rộng được lớn hơn các chữ cái.

Lưu ý: lý do tôi cần một phác thảo chất béo như vậy là vì tôi đã mô phỏng các nhãn đường phố trong "bản đồ google" và tôi muốn có một quầng sáng trắng béo xung quanh văn bản. Giải pháp này đã làm việc hoàn hảo cho tôi.

Đây là một mẹo nhỏ cho thấy giải pháp này

nhập mô tả hình ảnh ở đây


-15

Đây là tập tin CSS hy vọng bạn sẽ nhận được những gì bạn muốn

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */

9
Hãy giải thích về giải pháp của bạn. Ngay cả khi nó hoạt động, chúng ta không biết cách sử dụng nó.
Patrick Hofman

3
Tôi hy vọng các giải pháp phù hợp không phải mất 200 dòng css.
dardub

2
Câu trả lời này thực sự không có ý nghĩa gì cả.
siêu sáng
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.