Code Thuộc tính outline trong CSS

Trình soạn thảo - Code Thuộc tính outline trong CSS

Kết quả - Code Thuộc tính outline trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input{width:100%; height:35px; border:3px solid red; float:left; margin-bottom:20px}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px}
</style>
</head>
<body>
<h1>Code Thuộc tính outline trong CSS</h1>

<p>Dùng để kẻ đường viền nằm bên ngoài border của phần tử HTML input và textarea:</p>

<!--dotted-->
<input style="outline: 5px dotted green;" type="text" placeholder="outline: 5px dotted green;">
<textarea style="outline: 5px dotted green;" placeholder="outline: 5px dotted green;">&lt;/textarea>

<!--dashed-->
<input style="outline: 4px dashed blue;" type="text" placeholder="outline: 4px dashed blue;">
<textarea style="outline: 4px dashed blue;" placeholder="outline: 4px dashed blue;">&lt;/textarea>

<!--double-->
<input style="outline: 5px double green;" type="text" placeholder="outline: 5px double green;">
<textarea style="outline: 5px double green;" placeholder="outline: 5px double green;">&lt;/textarea>

<!--ridge-->
<input style="outline: 5px ridge green;" type="text" placeholder="outline: 5px ridge green;">
<textarea style="outline: 5px ridge green;" placeholder="outline: 5px ridge green;">&lt;/textarea>

<!--solid-->
<input style="outline: 5px solid green;" type="text" placeholder="outline: 5px solid green;">
<textarea style="outline: 5px solid green;" placeholder="outline: 5px solid green;">&lt;/textarea>

<!--groove-->
<input style="outline: 5px groove green;" type="text" placeholder="outline: 5px groove green;">
<textarea style="outline: 5px groove green;" placeholder="outline: 5px groove green;">&lt;/textarea>

<!--inset-->
<input style="outline: 5px inset green;" type="text" placeholder="outline: 5px inset green;">
<textarea style="outline: 5px inset green;" placeholder="outline: 5px inset green;">&lt;/textarea>

<!--outset-->
<input style="outline: 5px outset green;" type="text" placeholder="outline: 5px outset green;">
<textarea style="outline: 5px outset green;" placeholder="outline: 5px outset green;">&lt;/textarea>

<!--none-->
<input style="outline: none;" type="text" placeholder="outline: none;">
<textarea style="outline: none;" placeholder="outline: none;">&lt;/textarea>

<!--Không dùng outline-->
<input  type="text" placeholder="Không dùng outline">
<textarea = placeholder="Không dùng outline">&lt;/textarea>

<!--initial - Đưa giá trị của thuộc tính outline về giá trị mặc định-->
<input style="outline: 5px initial green;" type="text" placeholder="outline: 5px initial green;">
<textarea style="outline: 5px initial green;" placeholder="outline: 5px initial green;">&lt;/textarea>

<!--inherit - Kế thừa thuộc tính outline từ phần tử cha-->
<input style="outline: 5px inherit green;" type="text" placeholder="outline: 5px inherit green;">
<textarea style="outline: 5px inherit green;" placeholder="outline: 5px inherit green;">&lt;/textarea>

</body>
</html>