Đường viền bên trong CSS?

Question

Tôi đã tạo nút ở bên trái hoàn toàn bằng CSS. Nó là một div trong div. Tuy nhiên, ba nút ở bên phải là background thuộc tính trên img thẻ. Tôi đã làm điều này để tôi có thể mô phỏng hiệu ứng rollover theo hướng dẫn từ here.

Bây giờ, là có một cách để thêm biên giới bên trong, như trong nút đầu tiên, để ba người kia sử dụng CSS?

Fiddle here.

Answer 1

Theo box model, đệm nằm giữa nội dung và border. Bạn sẽ có thể tạo kiểu cho hình ảnh như:

.img-btn { 
    background: #FFF; // inner border color 
    padding: 2px; // inner border width 
    border: 2px solid #[yourgreen]; // outer border 
} 

Bạn không cần bất kỳ phụ div s để thực hiện điều này, ngay cả đối với nút CSS tinh khiết của bạn. Kiểu sau đây dành cho trường hợp hình ảnh là hình nền:

.img-btn { 
    background: #FFF url('your.img') no-repeat; 
    padding: 2px; 
    border: 2px solid #[yourgreen]; 
    width: [image width]; 
    height: [image height]; 
    background-position: center center; 
} 

Đây là DEMO của đường viền đôi như mô tả ở trên.

Answer 2

Sử dụng cách tiếp cận tương tự như bạn đã làm cho nút - chỉ coi các biểu tượng làm hình nền cho div bên trong. Vì vậy, bạn nên có một div với một số đệm, một div bên trong (trong trường hợp img của bạn) với một đường viền màu trắng, và một hình nền (các biểu tượng.)

Answer 3

Giả sử bạn không thể sửa đổi trực tiếp hình ảnh biểu tượng, chỉ cần bọc chúng trong div theo cách tương tự như "Thêm vào giỏ hàng". Bạn cũng sẽ cần phải sử dụng một trong hai

background-position: center center; 

để đảm bảo rằng các biểu tượng vẫn được làm trung tâm trong img nhỏ hơn, và/hoặc

background-size: 24px 24px; 

quy mô nền xuống một chút để các đường viền màu trắng doesn' t chạy vào các biểu tượng.

Answer 4

Bạn không cần hai số <divs> và <a> để thực hiện nút. Bạn có thể làm điều đó với một đơn <a>. Đối với cả hình ảnh và nút, bạn có thể sử dụng box-shadow để làm đường viền ngoài. Căn giữa background-images trong các phần tử <img>.

Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/

Output:

HTML:

<a id="add" href="#">Add To Cart</a> 
<img id="facebook" class="icon" /> 
<img id="twitter" class="icon" /> 
<img id="email" class="icon" /> 

CSS:

#add { 
    background-color: #9bc9c7; 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px #9bc9c7; 
    color: white; 
    display: inline-block; 
    font: normal 13px/25px Helvetica, Arial, Sans Serif; 
    height: 25px; 
    margin-right: 6px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 120px; 
    vertical-align: top; 
} 

#add:hover { 
    background-color: #eabeb2; 
    box-shadow: 0 0 0 2px #eabeb2; 
} 

.icon { 
    background-color: rgb(155, 201, 199); 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px rgb(155, 201, 199); 
    height: 25px; 
    margin-right: 3px; 
    width: 25px;  
}