卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章64334本站已运行4115

CSS如何修改元素轮廓虚边

我们在表单输出时,可以看到鼠标点击input元素可以发生一条蓝色轮廓虚边,如下图。

CSS如何修正元素轮廓虚边

搭配自己的样式不是非常美观,大众资源网教大家如何修改她。

这里需要用到CSS的outline。

outline语义

轮廓(outline)就是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的促进作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

outline采用方法

outline使用方法跟border一样,分成轮廓宽度、样式、颜色三个可以选参数。

outline:#ff0000 dotted 13px;

CSS 边框属性

"CSS" 列于中的数字指示哪个 CSS 版本定义了该属性。

属性 叙述 CSS
outline

在一个声明中设置所有的轮廓属性。

outline-color 规定边框的颜色。

outline-style 规定边框的样式。

outline-width 规定边框的宽度。

inherit 规定应该从父元素继承 

outline 属性的设置。

2
outline-color

设置轮廓的颜色。

olor_name 规定颜色值颜色名称的轮廓颜色(比如说 red)。 

hex_number 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。 

rgb_number 规定颜色值为 rgb 代码的轮廓颜色(比如说 rgb(255,0,0))。 

invert 预设。继续执行颜色探底回升(逆向的颜色)。可并使轮廓在相同的背景颜色中都就是可见。 

inherit 规定应该从父元素承继轮廓颜色的设置。

2
outline-style

设置轮廓的样式。

none默认。定义无轮廓。

dotted定义点状的轮廓。

dashed定义虚线轮廓。

solid定义实线轮廓。

double定义双线轮廓。双线的宽度等同于 outline-width 的值。

groove定义 3D 凹槽轮廓。此效果依赖于 outline-color 值。

ridge定义 3D 凸槽轮廓。此效果依赖于 outline-color 值。

inset定义 3D 凹陷边轮廓。此效果取决于 outline-color 值。

outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。

inherit规定必须从父元素承继轮廓样式的设置。

2
outline-width

设置轮廓的宽度。

thin规定粗轮廓。

medium预设。规定中等的轮廓。

thick规定细的轮廓。

length容许您规定轮廓厚薄的值。

inherit规定必须从父元素承继轮廓宽度的设置。

有关专题

卓越飞翔博客
上一篇: Jquery循环过滤空格+限制字数方法
下一篇: 苹果cmsv10采集明星资源无分类绑定的解决方法

相关推荐

留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏