Mam element div z granicą 1px i próbuję utworzyć granicę 3px w innym kolorze do tego div. Używam tego kodu:Jak utworzyć obramowanie całkowicie zakrywające sąsiadujące narożniki w CSS?
box {
border: 1px solid #ddd;
border-top: 3px solid #3F9BD0;
}
ale w kącikach granica nie jest dobry, patrz zdjęcie:
Jak mogę zrobić to granica dobrze wyglądać w następujący sposób:
skrzypce: https://jsfiddle.net/15tory3z/
Zamiast border-top, spróbuj użyć :after pseudoelement, aby odtworzyć pożądany efekt.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}<div class="box"></div>Wybór 2:
Zastosowanie linear-gradient().
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}<div class="box"></div>Witamy w granicach CSS. Jedynym sposobem, aby to zrobić, jest użycie pseudoelementów :after lub :before.
.box {
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
display: block;
content:'';
/* Positioning */
top: 0;
width: 100%;
height: 3px;
left: 0;
right: 0;
/* Color */
background-color: #3F9BD0;
}
Możesz także użyć box-shadow. Myślę, że w ten sposób jest o wiele czystszy. – Donutself
użyć CSS :after Pseudo-klasa, docs
.box_big {
border: 10px solid #ddd;
position:relative;
z-index: 1;
}
.box_big:after{
height: 10px;
position: absolute;
top:-10px; left:-10px; right:-10px;
content: " ";
z-index: 2;
background: red;
}
.box {
border: 1px solid #ddd;
position:relative;
z-index: 1;
}
.box:after{
height: 3px;
position: absolute;
top:-3px; left:-1px; right:-1px;
content: " ";
z-index: 2;
background: red;
}<div class="box_big">
big box
</div>
<hr />
<div class="box">
your box
</div>Można wyciągnąć te cienie wpuszczanych i padding:
div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}<div></div>lub tylko początek góry cień
div {
width: 40%;
height: 200px;
border:2px solid gray;
border-top:none;
box-shadow: 0 -10px #3F9BD0;
margin-top:12px;
}<div></div>indziej background Gradient można wykorzystać nawet animowane 2 Przykłady: http://codepen.io/gc-nomade/pen/IGliC lub http://codepen.io/gc-nomade/pen/pKwby
* To * jest naprawdę odpowiedzią. Nie ma potrzeby ": po". – Purag
Try th jest:
.box {
outline: 2px solid #ddd;
margin-top: -2px;
border-top: 10px solid #3F9BD0;
min-width:100px;
min-height:100px;
float:left;
}<div class="box"></div>Dokumentacja: http://stackoverflow.com/documentation/css/4258/outlines#t=201608141421248252498 –
Stawia również linię na top:
.box1 {
border: 10px solid #ddd;
border-top: 0;
box-shadow: 0 -30px 0 #3F9BD0;
float: left;
width: 300px;
height: 300px;
}<div class="box1"></div>Dokumentacja: http://stackoverflow.com/documentation/css/1746/box-shadow#t=201608141421542202596 –
Możesz dodać HTML i CSS oraz tworzenia jsfiddle.net demo – Tushar
Tak skrzypce : https://jsfiddle.net/15tory3z/ – AlbaStar
Powiązane: http://stackoverflow.com/questions/726 1703/set-css-border-to-end-in-a-90-zamiast-a-45-degree-angle –