проблема радиуса границы раздела (в Firefox и Opera)

Question

как видите, есть две картинки. Во-первых, на хром.На правой стороне есть кнопки Beğen и Yorumlar. Граница выглядит очень хорошо ..

Но на второй фотографии это видно;Firefox и Opera имеют проблемы с радиусом границы. Я пытаюсь сделать border-witdh: thin, border: 1px solid и т. д. Но это выглядит так же.

Как можно справиться?У вас есть идеи?

извините за мой английский. Спасибо

изображение на хроме

изображение на ff и опере

Answer 1

Этот эффект обычно называют «фоновым кровотечением» или «утечкой».Это можно исправить с помощью простого CSS:

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

Я впервые узнал об этом из блога Майка Хардингаhttp://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

А вот спецификация W3C:http://www.w3.org/TR/css3-background/#the-background-clip

Answer 2

... это выглядит почти так, как будто может уйти без использования рамки вообще.Там достаточно контраст между кнопкой и фоном.Вы пытались использовать внешнее свечение 1px (радиус размытия)?

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

Answer 3

Чтобы помочь с границей Чома до border:1px double .... Я знаю, что хром имеет проблему с границами с радиусом. Установка двойного значения вместо твердого помогает немного очистить его. Вид раздражает.