从条纹边框的实现谈盒子模型(转)
类似下面这个图形,只使用一个标签,可以有多少种实现方式:
假设我们的单标签为 div
:
1
|
< div ></ div >
|
定义如下通用 CSS:
1
2
3
4
5
|
div{
position:relative;
width: 180px;
height: 180px;
}
|
这一题主要考查的是盒子模型 Box Model
与 背景 background
的关系,以及使用 background-clip
改变背景的填充方式。
background
在 Box Model
中,他是布满整个元素的盒子区域的,并不是从 padding
内部开始(也就是说从 border 就开始啦),只不过实线边框(solid)部分遮住了部分 background
,所以我们使用虚线边框(dashed)就可以看到背景色是从 border
内部开始的。
我们给 div
添加如下样式:
1
2
3
4
|
div{
background:#9c27b0;
border:20px dashed #2196f3;
}
|
结果如下:
但有一点需要注意,background-color
是从元素的边框左上角起到右下角止,而 background-image
却不一样,他是从 padding
边缘的左上角起而到 border
的右下角边缘止。
background image 的绘制中有两个因素决定了绘图区域:
background positioning area。
background-origin
属性决定了这个相对定位位置,默认为padding-box
。所以默认的背景图片绘制是从 padding box 的左上顶点开始的。background painting area。
background-clip
属性决定了绘制区间,默认为border-box
。所以在background-repeat: repeat
的情况下:
The image is repeated in this direction as often as needed to cover the background painting area.
嗯,什么意思呢,你可以戳进这个 demo 看看,正常情况下的背景图填充如下:
当然,这个填充规则是可以通过 background-clip
改变的。
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框下面。
语法:
1
2
3
4
5
|
{
background- clip : border-box; // 背景延伸到边框外沿(但是在边框之下)
background- clip : padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
background- clip : content-box; // 背景裁剪到内容区 (content-box) 外沿。
}
|
继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
div{
background : #9c27b0 ;
border : 20px dashed #2196f3 ;
}
div::after{
content : "" ;
position : absolute ;
top : 0 ;
left : 0 ;
bottom : 0 ;
right : 0 ;
background : #fff ;
}
|
法二:
上面的方法,我们使用了 div
的背景色默认情况下从 border
开始填充,及伪元素设置白色背景色填充div
的中间的 padding-box
区域完成图形。
也可以反过来,使用伪元素背景色从 border-box
开始填充,使用 div
的背景色填充中间 padding-box
区域。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
div{
background : #fff ;
background- clip :padding-box;
border : 20px dashed #cccc99 ;
}
div::before{
content : "" ;
position : absolute ;
top : -20px ;
left : -20px ;
bottom : -20px ;
right : -20px ;
background : #996699 ;
z-index : -1 ;
}
|
具体的 Demo 戳这里 。
上面 法二
除了用到了 background-clip
改变背景的填充区域,还用到了 z-index
触发元素生成了堆叠上下文(stacking context),改变了元素的层叠顺序(stacking levle),让伪元素背景色
叠到了 div 背景色
之下,这两个概念下题会提及。
法....
本题主要是想讨论一下 CSS 的盒子模型 Box Model
与 背景 background
的关系,其实本题就是在于一个 dashed 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。
下面是我列出来的部分解法:
转自 http://www.cnblogs.com/coco1s/p/5895764.html
转载于:https://www.cnblogs.com/wulibo/p/5955798.html
从条纹边框的实现谈盒子模型(转)相关推荐
- 从条纹边框的实现谈盒子模型
类似下面这个图形,只使用一个标签,可以有多少种实现方式:(不考虑兼容性的情况下) 假设我们的单标签为 div : 定义如下通用 CSS: div{ position:relative; width: ...
- 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录 一.网页布局本质 二.盒子模型 三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法 一.网页布局本质 构建一个网页 , 首先 , 创建盒子模型 ...
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- 前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题 盒子模型 盒子水平垂直居中的方案 经典布局方案 圣杯布局 双飞翼布局 flex布局 定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
- 12CSS中的盒子模型
页面布局要学习三大核心,盒子模型.浮动和定位.学好盒子模型能非常好的帮助我们布局. 1.看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子Box: 利用CSS设置好盒子样 ...
- html盒子标准模型,CSS——(二)盒子模型与标准流
CSS--(2)盒子模型与标准流 上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子 ...
- cs字体样式和盒子模型学习1
CSS学习笔记3 文本样式2 1.文本颜色设置-属性:color 属性值:颜色的英文单词表示/HEX(三原色16进制)/RGBa(三原色十进制),该模式还支持对不透明度的设置a,他表示不透明度,取值区 ...
- 盒子模型属性详解及案例
盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 每个矩形都由元素的内容(content).内边距(padding).边框(border)和外边距(ma ...
- css盒子模型相关知识点二
目录 一.垂直布局 二.外边距的折叠 三.内联元素的盒子 四.默认样式 五.盒子的大小 六.阴影和圆角 一.垂直布局 使用overflow属性设置父元素如何处理溢出的子元素: 可选值: visible ...
最新文章
- vue ts 监听路由改变
- 2016年3月12日广州开源社区巡讲活动
- PHP输出表格的方法
- linux 管理命令 之 管理时间
- 软件安装被分成了两个iso文件怎么安装
- 【数据结构与算法】之深入解析“最长连续序列”的求解思路与算法示例
- 单元测试之DBUnit的使用以及原理剖析
- Fiori navigation logic ( Route )
- /dev/zero和/dev/null的区别
- P2012-拯救世界2【EGF】
- Git初始化配置以及配置github
- spss多元线性回归散点图_案例分析 | 多元线性回归及SPSS操作
- android driver log,Android调试驱动抓log的方法
- 奔驰北京工厂两年内将再投产三款电动车;希尔顿中国市场第300家酒店开业 | 美通企业日报...
- 如何管理好一个团队 怎样管理好一个团队 如何带领一个团队
- Tims中国上市背后:以新流派打法,“开源”咖啡市场
- 软件测试 三角形问题
- iphone文件连接smb服务器,实用!三种iPhone与Windows电脑互传文件操作技巧,建议收藏...
- 介绍国内外CMS系统
- C# vs Java —— 剑客vs刀客 Java vs .NET之飘逸的Java
热门文章
- parcel react_如何使用Parcel捆绑React.js应用程序
- javascript选择器_如何通过选择正确JavaScript选择器来避免沮丧
- Xiki:一个开发人员寻求增强命令行界面的能力
- mysql查询解析过程_MySQL查询执行过程详解
- UI设计师面试如何操作才能获得高薪
- OpenCV学习系列教程第五篇:测试和提高代码的效率
- redis 代理工具Predixy安装部署
- Java compiler level does not match the version of the installed Java project facet.
- springMVC参数绑定与数据回显
- VMware Tools手动下载