css:outline】的更多相关文章

CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-left 相同. 语法 border-radius: 1-4 length|% / 1-4 l…
CSS Outline(轮廓) 一.CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. CSS outline 属性规定元素轮廓的样式.颜色和宽度. 二.所有CSS 轮廓(outline)属性 "CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2). 属性 说明 值 CSS outline 在一个声明中设置所有的轮廓属性 outline-coloroutline-styleoutline-w…
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { width: 500px; height: 30…
outline具有和border很相似的属性,但多少又有些区别,就是因为这些区别才让它闪闪发光,先目睹一下. <style> div{ width:100px; height:100px; background-color:red; outline:10px solid #ccc; } </style> <div></div> 好像和"border"没啥区别,那么看下面这张图 它的宽和高还是100px,并没有增加边框的宽度. 也就是说:o…
outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度等于outline-width的值 groove:3D凹槽轮廓,效果取决于outline-color的值 ridge:3D凸槽轮廓,效果取决于outline-color的值 inset:3D凹边轮廓,效果取决于outline-color的值 outset:3D凸边轮廓,效果取决于outline-co…
outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dotted thick; }…
CSS Tables border border: border-width border-style border-color|initial|inherit; border-width border-width: medium|thin|thick|length|initial|inherit; border-style border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|…
前言  在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的 作用  用于创建可视对象的轮廓(元素的border-box),如表单按钮轮廓等. 与border不同 outline不占文档空间: outline不一定是矩形. 具体属性说明 /* 轮廓线颜色 * invert表示为颜色反转,即使轮廓在不同的背景颜色…
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 轮廓(outline)属性指定元素轮廓的样式.颜色和宽度. 轮廓(outline)实例 在元素周围画线本例演示使用outline属性在元素周围画一条线. 设置轮廓的样式本例演示如何设置轮廓的样式. 设置轮廓的颜色本例演示如何设置轮廓的颜色. 设置轮廓的宽度本例演示如何设置轮廓的宽度. CSS 轮廓(…
前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style type="text/css"> .ball{ background: rgba(100,100,100,0.2); width: 100px; height: 100px; padding: 10px; border-radius: 50%; box-shadow: -14px 8px…