輪廓（outline）與陰影(box-shadow) · 前端

輪廓是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用 **所有CSS 輪廓（outline）屬性** | 屬性 | 說明 | 值 | CSS版本 | | :-- | :-- | :-- | :-- | | [outline](https://www.html.cn/book/css/properties/user-interface/outline.htm) | 在一個聲明中設置所有的輪廓屬性 | outline-color、 outline-style、 outline-width、 inherit | 2 | | [outline-color](https://www.html.cn/book/css/properties/user-interface/outline-color.htm) | 設置輪廓的顏色 | color-name、 hex-number、 rgb-number、 invert、 ?inherit | 2 | | [outline-style](https://www.html.cn/book/css/properties/user-interface/outline-style.htm) | 設置輪廓的樣式 | none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit | 2 | | [outline-width](https://www.html.cn/book/css/properties/user-interface/outline-width.htm) | 設置輪廓的寬度 | thin、medium、thick 、length、inherit | 2 | ### 實例 ``` <style> p {border:1px solid red;}p.dotted {outline-style:dotted;}p.dashed {outline-style:dashed;}p.solid {outline-style:solid;}p.double {outline-style:double;}p.groove {outline-style:groove;}p.ridge {outline-style:ridge;}p.inset {outline-style:inset;}p.outset {outline-style:outset;} </style> </head> <body> 點線輪廓 虛線輪廓 實線輪廓 雙線輪廓 凹槽輪廓 壟狀輪廓 嵌入輪廓 外凸輪廓 注意: 如果只有一個 !DOCTYPE 指定 IE 8 支持 outline 屬性。 </body> ``` input發光特效： ``` input[type=text]:focus,input[type=password]:focus,textarea:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; //outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用 outline:none;border-color:rgba(253,215,5,.75); //輸入框邊框顏色 //box-shadow 屬性向框添加一個或多個陰影。 box-shadow:0 0 10px rgba(253,215,5,.105); //向外漫射程度1 -moz-box-shadow:0 0 10px rgba(253,215,5,.5);//向外漫射程度2 -webkit-box-shadow:0 0 10px rgba(253,215,5,3);//向外漫射程度3 } ``` ![](https://img.kancloud.cn/75/23/7523bc86cb5037d431436d7dd8a8519f_903x384.png) ## **box-shadow** box-shadow:*h-shadow v-shadow blur spread color*inset; | 值 | 說明 | | :-- | :-- | | *h-shadow* | 必需的。水平陰影的位置。允許負值 | | *v-shadow* | 必需的。垂直陰影的位置。允許負值 | | *blur* | 可選。模糊距離 | | *spread* | 可選。陰影的大小 | | *color* | 可選。陰影的顏色。在[CSS顏色值](https://www.runoob.com/cssref/css_colors_legal.aspx)尋找顏色值的完整列表 | | inset | 可選。從外層的陰影（開始時）改變陰影內側陰影 | ``` div { box-shadow: 10px 10px 5px #888888; } ``` 帶閃爍漸變的效果： ``` @keyframes shineRed { from {box-shadow: 0 0 5px #6E6C91; } 50% {box-shadow: 0 0 10px #51328C; } to {box-shadow: 0 0 5px #6E6C91; } } .shine_red:focus{ animation-name: shineRed; animation-duration: 15s; /*規定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。*/ /*animation-iteration-count: n|infinite; 定義動畫播放次數的數值。|規定動畫應該無限次播放。*/ animation-iteration-count: infinite; } ```