Home > Web Front-end > HTML Tutorial > 背景与边框之多层边框_html/css_WEB-ITnose

背景与边框之多层边框_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:46:13
Original
1389 people have browsed it

设计场景


  • 给元素添加多层边框
  • 给元素添加双层边框

box-shadow方案


.box {    width: 200px;    height: 80px;    background-color: #fafafa;    box-shadow: 0 0 0 10px #666;}
Copy after login

说明

  • 一个正值的扩张半径 + 两个为零的偏移量 + 一个为零的模糊值 所得到的投影看起来就是一道实线;

  • 有人会说为什么不用 border 属性实现呢?如果我们要实现多边框,显然用border属性是不合适的,而 box-shadow 的优点在于:它支持逗号分隔语法,我们可以创造任意数量的投影

注意

  • 投影的行为跟边框完全不一致,它不会影响布局,也不会受到 box-sizing属性的影响,但它会受 border-radius 属性的影响
  • 投影所创建出的假边框出现在元素的外圈。它并 不会响应鼠标事件,比如 悬停点击。这一点是非常重要的,不过可以给 box-shadow 属性加上inset关键字,来把投影绘制在元素的内圈。要注意的是,此时需要增加额外的内边框来撑出我们想要的效果

outline(描边)方案


.box {    width: 200px;    height: 80px;    background-color: #fafafa;    border: 10px solid #666;    outline: 1px solid #e5e5e5;}
Copy after login

优点

  • 边框样式灵活,而 box-shadow 只能模拟出实线边框
  • 如果要实现简单的缝边效果,只要额外添加 outline-offset 属性即可

注意

  • 只用于双层边框的场景
  • 边框 border 会受 border-radius 的圆角影响,而边框 outline 则不会,依然以直角的形式显示边框

《CSS SECRETS》

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template