I det här kapitlet kommer du att lära dig om följande egenskaper för CSS-användargränssnitt:
resize
outline-offset
Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Egenskapen resize
anger om (och hur) ett element ska kunna ändra storlek på av användaren.
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
Följande exempel låter användaren endast ändra storleken på ett <div>-element:
div
{
resize: horizontal;
overflow: auto;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Följande exempel låter användaren endast ändra storleken på ett <div>-element:
div
{
resize: vertical;
overflow: auto;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Följande exempel låter användaren ändra storlek på både höjden och bredden på ett <div>-element:
div
{
resize: both;
overflow: auto;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
I många webbläsare kan <textarea> storleksändras som standard. Här har vi använt resize-egenskapen för att inaktivera storleksändring:
textarea {
resize: none;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
Egenskapen outline-offset
lägger till utrymme mellan en kontur och kanten eller gränsen på ett element.
Obs! Kontur skiljer sig från gränser! Till skillnad från gränsen är konturen ritas utanför elementets gräns och kan överlappa annat innehåll. Konturen är också INTE en del av elementets dimensioner; elementets totala bredd och höjd påverkas inte av konturens bredd.
Följande exempel använder egenskapen outline-offset
för att lägga till utrymme mellan gränsen och konturen:
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
Följande tabell listar alla egenskaper för användargränssnittet:
Lägger till utrymme mellan en kontur och kanten eller kanten på ett element
Anger om ett element kan ändras i storlek eller inte av användaren