10.7 border |
您所在的位置:网站首页 › mac的微软office免费的吗 › 10.7 border |
border-width边框粗细:outline与border有什么不同? border-width 属性可以设置盒子模型的边框宽度。 为什么线的粗细叫宽度?边框线像马路往前冲,马路的宽度就好比是线的宽度。此外,还有stroke-width,是以后学Canvas绘制时要接触到的,是绘制的线的粗细,它们的名字是类似的。 border-widthstroke-widthoutline-width规范并没有规定实际值,故在不同浏览器效果是不一样的,但总体来讲,thin≤medium≤thick。 thinmediumthick像素值谁是厚,谁是薄?thin是薄,thick是厚。意思从单词字母的宽度上也可以看出来,一个是四个字母,一个是五个字母。 示例: border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; 简写语法(仍然是四值语法): border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px 2px; 轮廓线粗细outline-widthoutline-width 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线,位于 border 的外围。 示例: outline-width示例 #outline-div span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } thin medium thick效果: 问题:outline与border有什么区别?border占用空间,outline不占用空间,不会影响元素的尺寸和位置。border 可应用于几乎所有有形的html元素,而outline 是针对链接、表单控件、ImageMap和span等元素设计。 border-style边框样式border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。 有以下取值: none 和关键字 hidden 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,none 值优先级最低,意味着如果存在其他的重叠边框,则会显示为那个边框。 hidden 和关键字 none 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,hidden 值优先级最高,意味着如果存在其他的重叠边框,边框不会显示。 dotted 显示为一系列圆点。标准中没有定义两点之间的间隔大小,视不同实现而定。圆点半径是 border-width 计算值的一半。 dashed 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小,视不同实现而定。 solid 显示为一条实线。 double 显示为一条双实线,宽度是 border-width 。 groove 显示为有雕刻效果的边框,样式与 ridge 相反。 ridge 显示为有浮雕效果的边框,样式与 groove 相反。 inset 显示为有陷入效果的边框,样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时,会显示为 groove 的样式。 outset 显示为有突出效果的边框,样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时,会显示为 ridge 的样式。示例: border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; 简写语法: border-style:solid ; border-style:solid dotted; border-style:solid dotted dashed; border-style:solid dotted dashed double; border属性简写在了解了border-width与border-style以后,接下来就可以使用border这个简写属性了。 语法: || ||用一个,两个或三个值来指定border属性。 值的顺序无关紧要 。一般顺序为line-width、line-style及color。 示例: border: 1px solid #3a6587; border: 1px dashed red;关于设备像素比devicePixelRatio与1px的问题当我们通过border-width或border设置边框的时候,边框粗细在屏幕上是如何表现的? 禁止缩放代码: viewport的设置,和屏幕物理分辨率是按比例对等的,而不是相同的。移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么大。 使用 window.devicePixelRatio 可以查看当前窗口的设备像素比。在浏览器里按CTRL++或-,是可以改变这个值的。 例如,iPhone的devicePixelRatio==2,而border-width: 1px描述的是设备独立像素,所以,border被放大到物理像素2px显示,在iPhone上就显得较粗。 9月29日 【关于作者】 李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。 参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |