Code Thuộc tính outline-style trong CSS

Code Thuộc tính outline-style trong CSS

Code Thuộc tính outline-style trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-style 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; outline-width:5px; outline-color:green}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px; outline-width:5px; outline-color:green}
</style>
</head>
<body>

<h1>Code Thuộc tính outline-style trong CSS</h1>

<p>Dùng để quy định các kiểu đường viền nằm xung quanh thuộc tính border của phần tử HTML input, textarea:</p>

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

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

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

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

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

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

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

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

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

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

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

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

</body>
</html>
Code Thuộc tính outline-style trong CSS nằm trong bài viết Thuộc tính outline-style trong CSS