Tôi đang cố gắng tạo vòng kết nối có đường viền có lề.
Mọi thứ dường như hoạt động ngoại trừ i cant dường như nhận được ít số px của lề trong đó.
Mọi đề xuất xin vui lòng?css - vòng tròn có lề trên biên giới
.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;}
heres fiddle tôi: http://jsfiddle.net/nalagg/K6pdr/
tôi muốn nói để đối xử với nó như thế này:
Outer "border" - sử dụng một hộp bóng
Nội "margin" - sử dụng một đường viền màu trắng
Nội khu vực - Sử dụng màu nền
Tất cả cùng bạn nhận được:
.circle {
background-color: #F80;
border: 3px solid #FFF;
border-radius: 18px;
box-shadow: 0 0 2px #888;
height: 30px;
width: 30px;
}<div class="circle"></div>Là một thay thế, bạn có thể sử dụng một yếu tố thứ hai:
.circle {
border: 1px solid #CCC;
border-radius: 19px;
display: inline-block;
}
.inner {
background-color: #F80;
border-radius: 15px;
margin: 3px;
height: 30px;
width: 30px;
}<div class="circle">
<div class="inner"></div>
</div>Đường viền bên ngoài khá mờ nhạt. Có cách nào để làm cho nó dễ thấy hơn một chút không? chỉnh sửa: cần thêm một số không trong đó 'hộp bóng: 0 0 0 3px #fff;' – adamj
Hãy thử với:
.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin: 2px; background: #fcc; width: 30px; height: 30px; }
Hoặc với lớp đệm bên trong:
.ui-corner-all2 { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; padding: 2px; background: #fcc; width: 30px; height: 30px; }
Xem thêm trên t fiddle của mình sự khác biệt khi sử dụng margin vs padding thuộc tính CSS.
tôi không thấy một khoảng cách giữa nền và đột quỵ như hình ảnh trong bài đăng của tôi –
Tôi đã cập nhật fiddle của mình .. xem ngay bây giờ? http://jsfiddle.net/MQx7r/4/ –
[Bạn đang tiếp cận này một cách sai lầm; đó không phải là một lề, đó là một biên giới] (http://codepen.io/zzzzBov/pen/bEpdL). – zzzzBov