css3-13 如何改變文本框的輪廓顏色

一、總結

一句話總結：outline使用和border很像，幾乎一模一樣，多了一個offset屬性

1、輪廓outline如何使用？

使用和border很像，幾乎一模一樣，多了一個offset屬性

18             outline:2px dashed #00f;
19  outline-offset:20px;

2、輪廓outline和邊框的區別是什么？

使用和border很像，幾乎一模一樣，多了一個offset屬性

18             outline:2px dashed #00f;
19  outline-offset:20px;

3、輪廓outline的使用場景是什么？

input單行文本框focus時候的顏色

4、如何如何改變文本框的輪廓顏色？

outline屬性即可，使用和border很像，多了一個offset屬性

18             outline:2px dashed #00f;
19  outline-offset:20px;

二、輪廓outline

1、相關知識

輪廓樣式:
outline:2px solid #f00;
outline-offset:15px;

2、代碼

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         body{
 8             padding-left:300px;
 9             padding-top:100px;
10         }
11         .img{
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16             /*border-radius:256px;*/
17             border:2px solid #f00;
18             outline:2px dashed #00f;
19             outline-offset:20px;
20         }    
21     </style>
22     <script src="jquery.min.js"></script>
23 </head>
24 <body>
25     <div class='img'>
26         <img src="dog.png" alt="">    
27     </div>
28 </body>
29 <script>
30 </script>
31 </html>

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9269937.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/282851.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/282851.shtml
英文地址，請注明出處：http://en.pswp.cn/news/282851.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！