轮廓（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; } ```