Leser Arun schrieb mit einer Frage, wie man einen Body-Rahmen erstellt, der an den Innenseiten abgerundet ist. So wie hier. Wir haben schon Body-Rahmen behandelt, aber das war etwas anders.
Das sieht auf den ersten Blick ziemlich verwirrend aus. Man kann keine bizarren inneren Rundungen wie mit CSS machen, das ist verrückte Rede. Aber wenn man es einfach als ein normales abgerundetes Element betrachtet, das auf einem quadratischen Element sitzt, sieht es weniger seltsam aus. Das ist also Versuch #1.
Aber wenn uns dieses zusätzliche Element nur aus Designgründen stört, könnten wir das tatsächlich mit border-image auf dem <body>-Element erreichen. Denken Sie daran, dass border-image im Wesentlichen nur ein "Nine-Slice"-Scaling ist. Vier fest dimensionierte Ecken, vier Kanten, die auf einer Achse wiederholt werden, und eine dehnbare Mitte.
Ziemlich einfach
body {
border-image: url(rounded-edge.png) 25% repeat;
border-width: 25px;
}Beachten Sie, dass IE (jede Version) border-image nicht unterstützt.
Aber aber aber Scrollen
Wir müssten fragen, wie wichtig es ist, dass der „Body-Rahmen“ immer einen sichtbaren unteren Rahmen hat. Wenn es in Ordnung ist, dass der untere Teil wegscrollt, wenn die Seite länger als das Viewport ist, ist das einfach.
Wir stellen einfach sicher, dass der Körper mindestens so groß ist, aber größer werden kann.
* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }Wenn es nicht in Ordnung ist, dass der untere Rahmen wegscrollt (er muss jederzeit sichtbar sein), müssen wir wieder dieses zusätzliche Element verwenden. Nur wir stellen sicher, dass es vertikal scrollen kann. Diese Scrollleiste könnte jedoch die Rundungen beeinträchtigen, es sei denn, wir sind in WebKit und können dann das Aussehen der Scrollleisten anpassen, um sicherzustellen, dass es in Ordnung ist.
body {
background: #5bb0ff;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 10px;
padding: 20px;
overflow-y: scroll;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}Das ist alles, was ich habe.
Ein Nachtrag: Fügen Sie
-webkit-overflow-scrolling: touch;zur Klasse.page-wraphinzu, um das Trägheits-Scrolling auf iOS-Geräten beizubehalten.Vielleicht zu einfach, aber warum nicht einfach abgerundete Ecken und einen Rand am Body? http://jsbin.com/ilaxeb/1/edit
Das funktioniert auch gut, und da diese Elemente sowieso benötigt werden, können sie auch verwendet werden. Denken Sie daran, box-sizing: border-box zu verwenden, um die Höhe auf 100% zu halten. Und verwenden Sie min-height statt height, damit sich der Bereich erweitern kann. Und entscheiden Sie, ob Sie möchten, dass die Unterseite immer sichtbar ist oder nicht, was bestimmt, ob Sie die fixed position + overflow: scroll-Sachen verwenden sollten oder nicht.
Mein Beitrag (habe gerade deinen Eintrag gesehen, als ich meinen posten wollte, +Chris) http://codepen.io/anon/pen/KohAa
http://jsbin.com/ilaxeb/11/edit
Ich wollte gerade dieselbe Anregung machen! Obwohl ich zugegebenermaßen das html-Element auffüllen würde, anstatt dem Body einen Rand hinzuzufügen, aber ich glaube, ich bevorzuge den Rand am Body, jetzt wo du es erwähnt hast.
Genau das hatte ich auch im Sinn.
Schneller und schmutziger Test: http://jsfiddle.net/GExZa/
Ich habe mir die ganze Zeit dasselbe gedacht! Es scheint etwas übertrieben, die Lösung dem Body-Tag aufzuzwingen, aber hey, man weiß nie, wann dieser Trick nützlich sein könnte.
Verwendung eines Pseudoelements, damit es überall auf einer Website verwendet werden kann hier
Das funktioniert, es sei denn, Sie möchten, dass die Scrollleiste innerhalb des Rahmens angezeigt wird... dann wird es etwas knifflig und erfordert mehr CSS oder ein weiteres Element.
Firefox unterstützt border image! :)
Firefox unterstützt kein border-image? Seit wann denn das? Ich meine, es ist mir ziemlich egal, da es ein ziemlich nutzloses Feature ist, aber laut MDN und caniuse.com wird es seit Version 15 ungeprefixst unterstützt.
Beim Testen funktioniert es jedoch nicht. Aber was ist da los? Ich erinnere mich nicht, etwas darüber gesehen zu haben...?
Ich musste damit etwas herumspielen und es stellt sich heraus, dass es doch border-image unterstützt, es ist nur etwas wählerischer damit. Ich habe den Artikel aktualisiert.
Funktioniert nicht
Funktioniert
Ich schätze, Firefox benötigt zusätzlich zu border-width auch border-style, bevor es funktioniert.
Und ich denke, border-image ist ein wenig nützlich, es ist nur ein schlechter Name. Ich denke, mehr Leute würden es verstehen und mögen/benutzen, wenn es etwas wäre, das näher an
border-image hat noch einen langen Weg vor sich, bevor es nützlich ist. Es funktioniert nicht gut mit SVGs, und die Implementierung, selbst für normale PNG-Bilder, ist browserübergreifend inkonsistent. Es lohnt sich einfach nicht.
Was ist mit ohne border-image, mit drop shadow?
http://codepen.io/anon/pen/BdoHn
Wow!! Sehr schöner Tipp. Danke.
Ich versuche, den Originalitätspreis zu gewinnen, indem ich
display: table;verwende.Zu schlecht, dass es nur IE9+ ist (was bedeutet, dass die neuesten Firefox-, Chrome- und Opera-Versionen alle einwandfrei funktionieren).
... und dann bemerkte ich die nicht ganz offensichtliche Funktion aus dem CodePen-Beispiel, dass der untere Rahmen immer sichtbar sein muss.
Hier ist also eine Lösung dafür: hier.
Es hält die Scrollleiste an der richtigen Stelle. Auch kein zusätzliches Markup.
Dritte und (hoffentlich) letzte Version
http://codepen.io/Merri/full/ucEmg
Eine Menge CSS, aber es ergibt einen sehr schönen Transparenzeffekt für den Body-Rahmen. Sie können sehen, wie der Body-Inhalt hinter dem Rahmen scrollt, einschließlich der abgerundeten Ecken.
Sehr gut gemacht!
Safari 5.1.7 zeigt quadratische Ecken an.
Tolle Anleitung! Vielen Dank!
Es ist eine sehr einfache (oder eher schmutzige) Alternative. Kein Content Wrapper, unterer Rahmen immer sichtbar, Scrollleiste AUSSERHALB des Rahmens (was nützlich sein kann, wenn Ihnen nicht-Webkit-Browser wichtig sind).
http://codepen.io/erykpiast/pen/eDKpv
Tolles Beispiel für die Macht von CSS. Seit seiner Einführung dachte ich, dass dies eines der besten Dinge ist, das Webdesignern und Entwicklern jemals passiert ist. Tolle Anleitung!
Eine weitere Methode mit einem Rand & box-shadow
http://codepen.io/anon/pen/bnBKC
Vielen Dank Chris, dass du meinen Zweifel ausgeräumt und dir die Zeit genommen hast, eine Anleitung dazu zu schreiben..
Wow… gut gemacht Chris…
wirklich es macht Spaß und lehrt.
Warum nicht ein before-Element verwenden? http://dabblet.com/gist/5346231 Das sollte auch am Body funktionieren.
Was ist mit dem hier?
http://codepen.io/anon/pen/hjwgD
Danke.
Ist es nicht einfach, zwei divs zu verwenden? Das erste wäre der Container und das zweite der Inhaltsträger. So entfernen Sie das Bild komplett und alles ist CSS-basiert.
Ja. Das war Chris' erstes Beispiel.
Ja, aber er benutzt immer noch das Hintergrundbild.
Man braucht keine zwei divs. Es gibt genügend Elemente auf einer normalen Seite, um alles nur mit diesen Elementen und ein paar Pseudoelementen zu machen. Ich habe meinen „dritten Versuch“ oben in den Kommentaren gepostet, der alles ohne Bilder und ohne zusätzliche HTML-Struktur macht und auch einige coole Zusatzfunktionen hinzufügt, wie die Möglichkeit, eine Semitransparenz für den gesamten Rahmen, einschließlich der abgerundeten Ecken, zu haben, während die Klickbarkeit des Inhalts erhalten bleibt.
Man kann den Code auf fast jeder Website einfügen und er verleiht der Website den Body-Rahmen-Effekt, obwohl
* { box-sizing: border-box; }wie auf dieser Website Gift für ihn ist und man ein paarbox-sizing: content-box;Regeln hinzufügen muss, damit die Dinge richtig funktionieren.Was ist, wenn man die Tatsache ausnutzt, dass Umrandungen nicht abgerundet sind und Schatten es sind, und etwas wie das macht? http://dabblet.com/gist/5377617
Es gibt eigentlich keine Notwendigkeit für die outline-Regel, da wir es um das Viewport wickeln wollen. Der box-shadow würde funktionieren, aber der Nachteil jeder Einzelelementlösung ist, dass der Rahmen über dem Inhalt liegen sollte, wir aber den Zugriff auf den Inhalt nicht blockieren wollen. Leider gibt es in CSS keine Möglichkeit, den transparenten Hintergrund eines Elements zu ignorieren.
Hier ist CodePen zu dem Problem, basierend auf Ihrem box-shadow-Vorschlag: http://codepen.io/Merri/pen/KGqsh
Die Demos dafür funktionierten in Firefox nicht. Also habe ich die Regel hinzugefügt
html { background: transparent; }Das Hinzufügen zu den Demos in codepen lässt sie auch in Firefox funktionieren.