有趣的 CSS 3-大小调整、box-sizing、新边框

作者:vkvi 来源:千一网络(原创) 日期:2016-11-12

大小调整(resize)


[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

在 Chrome 中可以看到右下角(微软 Edge 中无效),有一个可拖动大小的标志,注意除了 resize,还要有 overflow、background(或 border),不然不生效。

resize 的可选值有:none、both、horizontal、vertical。

box-sizing

如果很早就接触 CSS,那么一定还记得,当时流行 IE,流行 width 值包含边框值。而这个 box-sizing 就是针对这个的。

  • content-box:宽度和高度分别应用到元素的内容框。
  • border-box:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
  • inherit:规定应从父元素继承 box-sizing 属性的值。

outline、outline-offset

效果如下:

outset 效果

border 之外还可以指定一个“边框”。

你前面那位网友看了:在网页中使用 Google 字体的方法(Google Font API)

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
赞助商们
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他